简述
在使用组件的时候，不可避免的要去使用内联的 style 属性去设置标签样式，按照常规的使用， style 只能是一些属性列表组合成的字符串；这限制了在使用组件时可以自定义或者动态改变样式， 而 Vue 对标签的 style 属性进行了优化，从而使其可以支持对象/字符串/数组形式的赋值。
用对象的方法绑定class
示例代码如下：
<div class="test">
<div class="otherClass" :class="{'class1':name1,'class2':name2}">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
name1: true,
name2: false,
}
})
</script>
↓ 执行结果：
<div class="otherClass class1">我是内容</div>
另一种写法:
<div class="test">
<div class="test" :class="classObj">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
classObj: {
name1: false,
name2: true
}
}
})
</script>
↓ 执行结果：
<div class="otherClass name2">我是内容</div>
用数组的方法绑定class
示例代码如下：
<div class="test">
<div class="otherClass" :class="[class1,class2]">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
}
})
</script>
↓ 执行结果：
<div class="otherClass name1 name2">我是内容</div>
在数组中还可以用判断是否显示这个类名:
<div class="test">
<div class="otherClass" :class="[class1,isShow? class2:'']">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
isShow: false
}
})
</script>
↓ 执行结果：
<div class="otherClass name1">我是内容</div>
用数组和对象混合的方法绑定class
示例代码如下：
<div class="test">
<div class="otherClass" :class="[class1,{class2: isShow}]">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
isShow: true
}
})
</script>
↓ 执行结果：
<div class="otherClass name1 class2">我是内容</div>
用对象的方式实现style绑定
示例代码如下：
<div class="test">
<div class="otherClass" :style="{color: yanse,width: kuan + 'px' }">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
yanse: 'red',
kuan: 100,
}
})
</script>
↓ 执行结果：
<div class="otherClass" style="coloe: red; width: 100px;">我是内容</div>
另一种写法:
<div class="test">
<div class="otherClass" :style="styleObj">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
styleObj: {
color: 'pink',
width: '200px',
}
}
})
</script>
↓ 执行结果：
<div class="otherClass" style="coloe: pink; width: 200px;">我是内容</div>
用数组和对象混合的方式实现style绑定
示例代码如下：
<div class="test">
<div class="otherClass" :style="[styleObjectA,styleObjectB]">我是内容</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
styleObjectA: {
color: 'red',
width: '100px',
},
styleObjectB: {
top: '20px'
}
}
})
</script>
↓ 执行结果：
<div class="otherClass" style="width: 200px; coloe: red; top: 20px;">我是内容</div>
这个知识点还是比较好学的，相对简单好理解