标签:
①对象语法
<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
<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,否则会出错。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar2‘, }, computed: { fullName: function () { return this.firstName + ‘ ‘ + this.lastName } } });
输出的结果为:
标签:
原文地址:http://www.cnblogs.com/wj204/p/5974273.html