操作元素的 class 列表和内联样式是数据绑定的一个常见需求。
1. class的对象绑定
我们直接来看一个例子,当我们想给模板中的元素添加样式时,可以传给 v-bind:class 一个对象,以动态地切换 class:
:class="{activated:isActivated}"
上面的语法表示 activated 这个 class 存在与否将取决于数据属性isActivated为true还是false。下面见完整的例子,我们可以进一步结合事件(控制isActivated)来实现点击变换颜色的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定1</title>
<style>
.activated{
color: red;
}
</style>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div @click="handleClick"
:class="{activated:isActivated}"> <!--这个div上绑定的一个类,类和一个
对象activated绑定,显示与否取决于后面的变量isActivated是true还是false-->
<!--花括号里的就是js表达式-->
hello world
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isActivated: true
},
methods:{
handleClick:function () {
this.isActivated=!this.isActivated
}
}
})
</script>
</body>
</html>
2. class的数组绑定
同样通过一个例子来学习,我们绑定一个绑定一个class数组,显示什么内容由activated和activatedOne这两个“变量”决定:
:class="[activated,activatedOne]"
下面见完整的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定2</title>
<style>
.activated{
color: red;
}
.activated-one {
font-size: 56px;
}
</style>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div @click="handleClick"
:class="[activated,activatedOne]"> <!--绑定一个class,显示什么内容由activated和
activatedOne这两个“变量”决定-->
hello world
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
activated:"", /*但activated这个变量一开始为空,所以一开始肯定是黑色的文字*/
activatedOne:"activated-one"
},
methods:{
handleClick:function () {
this.activated=this.activated==="activated" ? "":"activated"
}
}
})
</script>
</body>
</html>
效果:
点击前
点击后
3. 样式绑定–style
通常直接将样式绑定到一个样式对象,显得直观简洁:
:style="styleObj"
同样我们结合点击事件实现切换样式的效果,以下是完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定3</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="styleObj" @click="handleDivClick"> <!--styleObj对应的一定是个表达式-->
hello world
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
styleObj: {
color:"black"
}
},
methods:{
handleDivClick:function () {
this.styleObj.color=this.styleObj.color==="black"?"red":"black"
}
}
})
</script>
</body>
</html>