类名绑定 ：= v-bind 单项数据绑定
第一种方法：类名绑定方法 -> 对象形式 ，适用于通过布尔值来控制样式的改变
写法 ：
<p :class = "{类名: 布尔值}">
**第二种方法：类名绑定方法 -> 数组形式 **
写法：
<p :class = "['类名1'，'类名2']"></p>
<style>
.size {
width: 100px;
height: 100px;
}
.bg{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<h2> 类名绑定方法 -> 对象形式 </h2>
<!-- <p :class = "{类名: 布尔值}"></p> -->
<p :class = "{size: true,bg: true}"></p>
<p :class = "{size: sizeFlag,bg: true}"></p>
<h2> 类名绑定方法 -> 数组形式 </h2>
<p :class = "['size','bg']"></p>
<p :class = "[a,b]"></p>
</div>
</body>
<script src = "../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
sizeFlag: true,
a: 'size',
b: 'bg'
}
})
这里中间通过一个中间的sizeFlag布尔值来控制样式的展示说明是可以通过控制这个布尔值的变化来达到控制样式的展示等效果
样式绑定
样式绑定也有两种，一种是对象形式，一种是数值形式
<div id="app">
<h2> 样式绑定 - 对象形式 </h2>
<p :style = "{width: '100px',height: '100px',background: 'red'}"></p>
<p :style = "styleTheme"></p>
<h2> 样式绑定 - 数组形式 </h2>
<p :style = "[{width: '50px',height: '50px'},{background: 'yellow'}]"></p>
<p :style = "[size,color]"></p>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
styleTheme: {
width: '50px',
height: '50px',
background: 'red'
},
size: {
width: '150px',
height: '150px'
},
color: {
background: 'green'
}
}
})
</script>
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
