属性绑定和样式绑定
属性绑定
- 使用
v-bind指令<div> <a v-bind:href="url">百度</a> </div> v-bind缩写形式<div> <a :href="url">百度</a> </div>
样式绑定
class绑定
class绑定对象用法
<div v-bind:class="{style1: active, style2: active1}">
测试样式
</div>
var vm = new Vue({
el: '#app',
data: {
active: true,
active1: true
}
});
style1和style2属性为class名，active为属性的值，可以取true or false，当active的值
为true时，对应class为激活状态
class绑定数组用法
<div v-bind:class="[s1, s2]">
测试样式
</div>
var vm = new Vue({
el: '#app',
data: {
s1: 'style1',
s2: 'style2'
}
});
s1和s2是data里的属性，它们可以被赋值为某个class
对象绑定和数组绑定结合使用
<div v-bind:class="[s1, s2, {test: isTest}]">
测试样式
</div>
var vm = new Vue({
el: '#app',
data: {
s1: 'style1',
s2: 'style2',
isTest: true
}
});
class绑定值简化操作
<div v-bind:class="arrClasses">
测试样式
</div>
<div v-bind:class="objClasses">
测试样式
</div>
var vm = new Vue({
el: '#app',
data: {
arrClasses: ['style1', 'style2'],
objClasses: {
style1: true,
style2: true
}
}
});
当标签有默认的class时如何保留
<div class="test" v-bind:class="objClasses">
测试样式
</div>
style绑定
style绑定对象用法
<div id="app">
<!-- 对象形式 -->
<div v-bind:style="{
width: widthStyle, height: heightStyle, border: borderStyle}"></div>
<!-- 对象简写形式 -->
<div v-bind:style="objStyle"></div>
</div>
var vm = new Vue({
el: '#app',
data: {
widthStyle: '100px',
heightStyle: '100px',
borderStyle: '1px solid red',
objStyle: {
width: '100px',
height: '100px',
border: '1px solid red'
}
}
});
style绑定数组用法
<div id="app">
<!-- 数组形式 -->
<div v-bind:style="[baseStyle, overrideStyle]"></div>
</div>
var vm = new Vue({
el: '#app',
data: {
baseStyle: {
width: '100px',
height: '100px',
border: '1px solid red'
},
overrideStyle: {
border: '1px solid red',
backgroundColor: 'skyblue'
}
}
});
当数组里有多个对象时，不同对象里相同的属性会被覆盖，不存在的属性则添加