vue中，class、内联style绑定、computed属性

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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绑定、computed属性 的全部内容， 来源链接： utcz.com/z/379522.html

回到顶部