最近學習了vue中class和class的用法，想來總結一下，也把我的知識提供給大家使用；首先來總結class的用法，vue中的class有4種寫法;class和style都屬於DOM屬性，所以在vue中都用:class和:style表示
<style>
.red{color:red;}
.blue{background-color:blue;}
</style>
想給id為box的元素加上這些樣式
方法一
<div id="box">
<strong :class="[reds,blues]">
涼涼三生三世，為你四年成河水<strong>
</div>
引入vue.js文件是必須的(自行引入)
<script>
new Vue({
el:"#box",
data:{
reds:"red", //此處的red和blue指的是style中的red類和blue類
blues:"blue"
}
});
</script>
結果是id為box的div字體和紅色，背景為藍色
方法二
<div id="box">
<strong :class="{red:true,blue:false}">涼涼三生三世，為你四年成河水<strong>
</div>
<script>
new Vue({
el:"#box",
data:{}
});
</script>
結果是id為box的div的字體顏色為紅色，背景色不為藍色
方法三
<div id="box">
<strong :class="json">涼涼三生三世，為你四年成河水<strong>
</div>
<script>
new Vue({
el:"#box",
data:{ //把屬性都放在一個對象里面
json:{
red:false,
blue:true
}
}
});
</script>
結果是id為box的div的字體顏色為默認顏色，背景色為藍色
方法四
<div id="box">
<strong :class="{red:a,bule:b}">涼涼三生三世，為你四年成河水<strong>
</div>
<script>
new Vue({
el:"#box",
data:{
a:true,
b:false
}
});
</script>
結果是id為box的div的字體為紅色，背景色
不為藍色