1.Style的绑定 v-bind:style="styleMsg"
<body>
<div id="app" class="app">
<div v-for="item in list">
<div v-if="item.age > 25"
v-bind:style="{'color':'blue'}">
{{ item.age }}
</div>
<div v-else
v-bind:style="styleMsg">
{{ item.name }}
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list: [{
name: 'jack',
age: 29
},{
name: 'bill',
age: 19
}],
styleMsg: {
color: 'red',
'text-shadow': '0 0 5px #232323'
//前面的属性带横线-的，要用单引号引起来。或者用驼峰的写法就不用加单引号了：textShadow
}
}
})
</script>
</body>
前面的属性带横线-的，要用单引号引起来。或者用驼峰的写法就不用加单引号了：textShadow
页面效果：
2.Class的绑定 v-bind:class="['a','b']"
<div v-if="item.age > 25"
v-bind:class="['active','more','add',{'another':true}]"
v-bind:style="{'color':'blue'}">
{{ item.age }}
</div>
页面效果：
<body>
<div id="app" class="app">
<div v-for="item in list">
<div v-if="item.age > 25"
v-bind:class="['active','more','add',{'another': item.age < 100}]"
v-bind:style="{'color':'blue'}">
{{ item.age }}
</div>
<div v-else
v-bind:style="styleMsg">
{{ item.name }}
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list: [{
name: 'jack',
age: 29
},{
name: 'bill',
age: 19
}],
styleMsg: {
color: 'red',
'text-shadow': '0 0 5px #232323'
//前面的属性带横线-的，要用单引号引起来。或者用驼峰的写法就不用加单引号了：textShadow
}
}
})
</script>
</body>
页面效果：
