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

vue中,class、内联style绑定

时间:2016-10-18 18:29:25      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

1.绑定Class

①对象语法

 <li :class="{ ‘active‘: activeIdx==0 }" @click="fnClickTab(0)">产品特色</li>

②数组语法

<div v-bind:class="[classA, classB]">

三元表达式:

<div v-bind:class="[classA, isB ? classB : ‘‘]">

表明始终添加classA,在isB为true时添加classB

2.绑定内联style

<li class="slider" v-bind:style="{marginLeft: leftIndex}"></li>
data: {
  leftIndex: ‘0.167%‘
}

!注意:margin-left写成marginLeft

也可以绑定到一个样式对象

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: ‘red‘,
    fontSize: ‘13px‘
  }
}

同样注意font-size写成fontSize,否则会出错。

3.computed属性

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
      el: ‘#demo‘,
      data: {
        firstName: ‘Foo‘,
        lastName: ‘Bar2‘,
      },
      computed: {
        fullName: function () {
          return this.firstName + ‘ ‘ + this.lastName
        }
      }
    });

输出的结果为:

技术分享

vue中,class、内联style绑定

标签:

原文地址:http://www.cnblogs.com/wj204/p/5974273.html

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