动态绑定class的几种方式
1.对象语法 行内或计算属性
<style>
.static {
width: 100px;
height: 100px;
background-color: #ccc;
}
.orange {
border: 1px solid orange;
}
</style>
</head>
<body>
<!-- 对象语法 -->
<!-- <div id="example" class="static" v-bind:class="{'orange': isRipe, 'green': isNotRipe}"></div> -->
<div id="example" class="static" v-bind:class="haha"></div>
</body>
// 01class绑定方法1对象语法
var vm = new Vue({
el: "#example",
data: {
// isRipe: true,
// isNotRipe: false
age: 4,
member: 999
},
computed: {
haha: function() {
return {
'orange': this.age > 3 ? true : false,
'green': this.member > 1000 ? true : false
}
}
}
})
方法2数组语法
// 数组语法
<div id="example" class="static" v-bind:class="[class1, class2]"></div>
var vm = new Vue({
el: "#example",
data: {
class1: 'orange',
class2: 'green'
}
})
方法3绑定行内样式
<!-- 对象语法 -->
// <div id="app" v-bind:style="{color: color, fontSize: fontSize+'px' }">hello world</div> -->
// <div id="app" v-bind:style="style">hello world</div>
<div id="app" v-bind:style="haha">hello world</div>
var vm = new Vue({
el: '#app',
data: {
// color: 'pink',
// fontSize: 30
// style: {
// color: 'pink',
// fontSize: '30px'
// }
age: 4,
member: 9000
},
computed: {
haha : function() {
return {
color: this.age >3 ? orange: green,
fontSize: this.member> 1000 ? '30px' :'10px'
}
}
}
})