Vue.js v-bind 添加樣式
範例一：設定單個class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6 v-bind</title>
<style>
.active{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: myCheck }">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: true
}
});
</script>
</body>
</html>範例二：設定很多個class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6 v-bind</title>
<style>
.active{
color:red;
font-size: 30px;
}
.normal{
color:green;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: true,
myCheck2: false
}
});
</script>
</body>
</html>參考：［教學］Vue js快速上手（七）改變樣式的魔術棒v-bind | YOTTA友讀——陪你成長的學習夥伴｜跨領域線上學習平台 (yottau.com.tw)
