本文摘自PHP中文网,作者王雪芹,侵删。
Vue中的样式绑定在网页中的应用比较广泛,添加css样式和删除css样式,用jq实现起来并不难,这次我们通过一个例子来攻克Vue中的css样式绑定知识点。效果:
在页面上有一个文字“hello",点击hello的时候,文字颜色变成红色,再点击,文字颜色又变成黑色。那么颜色的变化,我们需要通过css样式来控制。
方法1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
解释下这个写法:class='{actived:isActived}',如果isActived是false,则class='',如果isActived是true,则class='actived'。
所以我们在data中定义了默认值false,当点击的时候会触发方法handleClick,使this.isActived等于取反的值。
方法2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
这种方法我们是给了一个数组,数组中传递一个默认的空值isActived,当鼠标点击的时候,就会触发handleClick方法,在这里我们通过三元运算符来获取this.isActived的值。
和三元运算符同样效果的就是用if判断:
1 2 3 4 5 |
|
方法3:
在上面我们是直接用class来实现效果,那么html中style样式如何实现呢?代码并不难,我们可以仿照第二个来试试效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
我们默认给出一个黑色的字体颜色black,点页面文字被点击后,触发函数handleClick,这个时候我们仍然用三元运算符判断获取到this.styleObj.color的值来实现效果。
相关推荐:《javascript高级教程》
以上就是Vue中的样式绑定的讲解,同一个效果有很多种实现方法,条条大路通罗马,小伙伴get起来吧!
以上就是Vue中的样式绑定详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
angular与angularjs、react和vue的简单对比
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者