碼迷,mamicode.com
首頁 > 其他好文 > 詳細

v-bind綁定屬性樣式——class的三種綁定方式

時間:2017-05-21 20:32:14      閱讀:3805      評論:0      收藏:0      [點我收藏+]

標簽:nbsp   img   綁定   http   技術分享   技術   ring   屬性   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">
  <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的三種綁定方式

標簽:nbsp   img   綁定   http   技術分享   技術   ring   屬性   bin   

原文地址:http://www.cnblogs.com/model-zachary/p/6885668.html

(0)
(2)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
25选5历史开奖结果百度