avatar

Vue三种形式实现样式绑定

Vue三种形式实现样式绑定

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

方法一:

CSS 部分

1
2
3
.activated{
color: red;
}

html 部分

1
2
3
4
5
6
7
8
<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
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
.activated{
color: red;
}

html 部分

1
2
3
4
5
6
7
8
<div id="app">
<div @click="handleDivClick"

:class="[activated]"
>
Hello World
</div>
</div>

js 部分

1
2
3
4
5
6
7
8
9
10
11
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
<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
var vm = new Vue({
el:"#app",
data:{
styleObj:{
color:"black"
}
},
methods:{
handelDivClick:function(){
this.styleObj.color=this.styleObj.color==="black" ? "red":"black"
}
}
})

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

文章作者: zhiwei
文章链接: https://zhiweichen.com/2018/05/17/vue三种形式实现样式绑定/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 至玮
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论