您的位置：首页 > Web前端 > Vue.js

Vue框架入门到实践(二)

2020-08-27 22:47 453 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航