vue样式之class

Posted 2020-10-07

1.首先要定义样式

 .red{color: red;}
 .green{ color: green;}
 .blue{background: blue;}    

2.数组里的red是data对象里面的red变量，值‘red’是我们定义的样式，多个以，隔开

<div id="box">
        <strong :class="[red]">文字...</strong>
</div>

new Vue({
      el:‘#box‘,
      data:{
            red:‘red‘,
             b:‘blue‘
               },
       methods:{}
 });

3.判断true/false(以定义好的样式的class名称为变量)

<div id="box">
        <strong :class="{green:true,blue:true}">文字...</strong>
</div>

4.同上判断true/false(以定义好的样式的class名称为变量,在data里面定义变量控制true、false)

data:{
    a:true,
    b:false
 },
<div id="box">
        <strong :class="{red:a,blue:b}">文字...</strong>
</div>

5.以json数据形式

data:{
     json:{
           red:true,
           blue:true
      }
},
<div id="box">
        <strong :class="json">文字...</strong>
</div>