最近学习了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的字体为红色，背景色 不为蓝色
转载于:https://www.cnblogs.com/yuershuo/p/6861951.html