<div id="app">
<h1 class="bigFontSize" :class="{ bgColor: isChange}">標題一</h1>
<button class="btn btn-primary" @click="isChange = !isChange">轉換樣式</button>
</div>.bigFontSize {
font-size: 30px;
}
.bgColor {
background-color: red;
}
.FontColor {
color: #fff;
}
.btn {
padding: 10px 20px;
border-radius: 5px;
border:1px solid transparent;
font-size: 2rem;
}
.btn:hover {
cursor: pointer;
}
.btn-primary {
background-color: #0d6efd;
border:1px solid #0d6efd;
color: #fff;
}
;(function(){
let vm = new Vue({
el: '#app',
data: {
link: {
href: 'https://www.google.com/',
target: '_black',
content: 'Google'
},
isChange: true
}
})
})()
External CSS
This Pen doesn't use any external CSS resources.