Vuejs 样式绑定
2018-09-09 本文已影响4人
passMaker
本文主要归纳，在 Vuejs 中。如何实现数据与样式进行绑定。
class 对象绑定
在 div 标签上绑定 class，并绑定一个对象{activated: isActivated}。表示 div 元素的 class 名称为 activated，它是否显示取决于数据里面 isActivated 的变量。
然后在 data 里面定义这个 isActivated 变量，给它一个默认值 false。
再给 methods 中的 handleDivClick 事件写上取反的逻辑即可。
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>Hello World</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function(){
this.isActivated = !this.isActivated
}
}
})
</script>
<style>
.activated {
color: red;
}
</style>
</body>
class 数组绑定
在 class 中使用数组[activated]，即 div 元素显示 class 是 activated 这个变量里面的内容。由 activated 决定。在 methods 中中的 handleDivClick 事件写上给 activated 置为 "activated"字符串（<style>中定义过的class效果）即可。
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activated]"
>Hello World</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activated: ""
},
methods: {
handleDivClick: function(){
if(this.activated === "activated"){
this.activated = ""
}else{
this.activated = "activated"
}
}
}
})
</script>
<style>
.activated {
color: red;
}
</style>
</body>
因为这种绑定方式是一个数组，所以可以给 class 绑定多个变量。
style 样式绑定
通过修改 div 中内联 style 属性的对象数据属性来达到改变样式的效果。
<body>
<div id="app">
<div :style="styleObj" @click="handleDivClick"
>Hello World</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black",
fontSize: "30px"
}
},
methods: {
handleDivClick: function(){
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
}
}
})
</script>
</body>
