v-bind指令动态绑定class属性
代码：
<body>
<div id="app">
<!-- <h2 v-bind :class = "{类名：boolean}"></h2> -->
<button id="btn1" v-on:click = "click"><h2 v-bind:class = "{active: isActive,line:false}" >{{message}}"nihoa"</h2></button>
<button id="btn2" v-on:click = "click"><h2 v-bind:class = "getClass()" >{{message}}"nihoa"</h2></button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:"你好",
active:"active",
isActive:true
},
methods: {
click:function(){
this.isActive=!this.isActive
console.log(this.isActive)
},
getClass:function(){
return {active: this.isActive,line:false}
}
}
});
</script>
</body>
v-bind指令动态绑定class属性
代码
前者对象绑定逼数组绑定用得多一些
<body>
<div id="app">
<h2 :style = "{key:value,css的属性：属性值}"></h2>
<h2 :style ="{fontSize : finalSize}">{{message}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:"阿锋",
finalSize:'100px'
},
methods: {}
});
console.log(vm)
</script>
</body>
<div id="app">
<h2 :style="[baseStyle]">{{message}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:"阿锋",
baseStyle: {backgroundColor: 'red'},
baseStyle1:{fontSize:'100px'}
},
methods: {}
});
</script>
