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

v-bind绑定属性样式——class的三种绑定方式

时间:2019-11-14 16:42:21      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:vue   写法   属性   col   样式   str   字符   class   bin   

1、布尔值的绑定方式

<div id="demo">
  <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"></span>
</div>

var vm = new Vue({
    el:"#demo",
    data:{
      isA: true,
      isB: true
    }
})

2、变量的绑定方式

<div id="demo">
<span :class=[classA,classB]></span>
</div>

var vm = new Vue({
    el:"#demo",
    data:{
      classA:"class-a",
      classB:"class-b"
    }
})

3、字符串绑定方式

<div id="demo">
  <span :class="classA"></span>
</div>

var vm = new Vue({
    el:"#demo",
    data:{
      classA:"string"
    }
})

4、三目运算

<div id="demo">
  <p :class="isclass?classC:classD"></p>
</div>

var vm = new Vue({
    el:"#demo",
    data:{      

    classC:"C",
    classD:"D",

    isclass:true

    }
})

5、综合的写法

<div id="demo">
  <span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span>
</div>

var vm = new Vue({
    el:"#demo",
    data:{
      one:"string",
      classa:true,
      classb:false

    }
})

 

v-bind绑定属性样式——class的三种绑定方式

标签:vue   写法   属性   col   样式   str   字符   class   bin   

原文地址:https://www.cnblogs.com/cyh-blogs/p/11858239.html

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