文章目录
绑定 HTML Class
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
内联样式在模板里
<div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
<script type="text/javascript">
var vm1 = new Vue({
el: "#div1",
data: {
isActive: true,
hasError: true,
}
})
</script>
通过浏览器查看,渲染的html结构是:
<div id="div1" class="active text-danger"></div>
内联样式不在模板里
<div id="div2" :class="class_obj"></div>
<script type="text/javascript"> var vm2 = new Vue({ el: "#div2", data: { class_obj: { isActive: true, hasError: true, } } }) </script>
渲染为如下的结构:
<div id="div2" class="isActive hasError"></div>
绑定返回对象的计算属性
<div id="div3" v-bind:class="classObject"></div>
<script type="text/javascript"> var vm3 = new Vue({ el: "#div3", data: { isActive: true, error: true }, computed: { classObject: function () { return { active: this.isActive && this.error, 'text-danger': this.error } } } }) </script>
渲染的html结构如下:
<div id="div3" class="active text-danger"></div>
数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:
class 列表
<div id="div4" v-bind:class="[activeClass, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
渲染为
<div id="div4" class="active text-danger"></div>
class 列表使用三元表达式
如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div5",
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
渲染为:
<div id="div5" class="active text-danger"></div>
class 列表使用对象语法
<div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div6",
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
渲染为:
<div id="div6" class="active text-danger"></div>
class 综合练习
<style> .red { color: red; }
.thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; }
</style>
<body> <div id="app"> <h1 class="red thin">这是一个很大很大的H1,大到你无法想象!!!</h1>
<!-- 第一种使用方式,直接传递一个数组,注意: 这里的 class 需要使用 v-bind 做数据绑定 --> <h1 :class="['thin', 'italic']">这是一个很大很大的H1,大到你无法想象!!!</h1> <!-- 在数组中使用三元表达式 --> <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1,大到你无法想象!!!</h1> <!-- 在数组中使用 对象来代替三元表达式,提高代码的可读性 --> <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1,大到你无法想象!!!</h1> <!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号; 属性的值 是一个标识符 --> <h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!</h1>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: ‘#app’,
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
</body>
用在组件上
1、例如,如果你声明了这个组件:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class:
<my-component class="baz boo"></my-component>
HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
2、对于带数据绑定 class 也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
绑定内联样式v-bind:style
v-bind:style 的对象语法十分直观
——看着非常像 CSS,但其实是一个 JavaScript 对象
<div id="div1" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{ msg }}</div>
<script type=“text/javascript”>
new Vue({
el: “#div1”,
data: {
activeColor: ‘red’,
fontSize: 30,
msg: “hello vue”
}
})
</script>
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div id="div2" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div2",
data: {
msg: "直接绑定到一个样式对象通常更好",
styleObject: {
color: 'red',
fontSize: '23px'
}
}
})
</script>
对象语法常常结合返回对象的计算属性使用
<div id="div3" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div3",
data: {
msg: "结合返回对象的计算属性使用",
color: 'red',
fontSize: '12px'
},
computed: {
styleObject: function () {
return {color: 'yellow', fontSize: '23px'}
}
}
})
</script>
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
msg: "我是数组绑定方法",
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
浏览器渲染结果如下: