vue中class的用法

最近学习了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