首页 > 其他 > 详细

vue样式之class

时间:2017-09-21 17:27:43      阅读:233      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!