class与style绑定
<body>
<div id="app" v-bind:class="{active:isActive, green:isGreen}" :style="{width:isWidth?'180px':'',height:height}">
<!-- v-bind:class="['border','font-size']" --> <!-- 静态绑定class -->
<!-- v-bind:class="{active:isActive, green:isGreen}" --> <!-- 动态绑定class -->
<!-- :style="{width:isWidth?'180px':'',height:height}" --> <!-- 动态绑定内联样式style -->
这是一个盒子</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive:true,
isGreen:true,
isWidth:true,
height:"180px"
}
});
</script>
<style type="text/css">
.active{background-color: red;}
.green{color: white;}
.border{border: 1px solid black;}
.font-size{font-size: 20px;}
</style>
</body>
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
