Fork me on GitHub

Vue三种形式实现样式绑定

Vue三种形式实现样式绑定

要求: 一段文字 Hello World 点击一下变红再点击一下变黑,用Vue来实现

方法一:

CSS 部分

1
2
3
4
5
6
<style>
.activated{
color: red;
}
</style>

html 部分

1
2
3
4
5
6
7
8
9
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>
Hello World
</div>
</div>

js 部分

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDivClick:function () {
this.isActivated=!this.isActivated
}
}
})

这是用对象来绑定的形式,设置div class为activated,这个activated显不显示由isActivated这个变量来决定,每点击一次变量取反

方法二:

CSS 部分

1
2
3
4
5
6
<style>
.activated{
color: red;
}
</style>

html 部分

1
2
3
4
5
6
7
8
9
<div id="app">
<div @click="handleDivClick"
:class="[activated]"
>
Hello World
</div>
</div>

js 部分

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
el:"#app",
data:{
activated:""
},
methods:{
handleDivClick:function () {
this.activated= this.activated==="activated" ? "" : "activated";
}
}
})

这是用数组的方式,先将数组设为空,点击时做判断如果没有activated这个class就加,如果没有则设为空。

方法三:

html 部分

1
2
3
4
5
6
<div id="app">
<div :style="styleObj" @click="handelDivClick">
Hello World
</div>
</div>

js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var vm = new Vue({
el:"#app",
data:{
styleObj:{
color:"black"
}
},
methods:{
handelDivClick:function(){
this.styleObj.color=this.styleObj.color==="black" ? "red":"black"
}
}
})

这是用了行内样式,先将这个行内样式定义为一个对象,设置这个行内样式最初始的颜色为黑色,点击时和方法二一样进行判断,如果是黑色就变为红,如果是红色就变为黑色

-------------This is the endThank you for your reading-------------

本文标题:Vue三种形式实现样式绑定

文章作者:Chen

发布时间:2018年05月17日 - 13:05

最后更新:2018年05月17日 - 14:05

原始链接:http://zhiweichen.com/2018/05/17/vue三种形式实现样式绑定/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。