码迷,mamicode.com
首页 > 其他好文 > 详细

vue样式之class

时间:2017-09-21 17:56:14      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:span   名称   class   变量   strong   数组   控制   gre   bsp   

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>

 

vue样式之class

标签:span   名称   class   变量   strong   数组   控制   gre   bsp   

原文地址:http://www.cnblogs.com/andongWeb/p/7569384.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!