扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关Vue中样式绑定是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
Vue中的样式绑定在网页中的应用比较广泛，添加css样式和删除css样式，用jq实现起来并不难，这次我们通过一个例子来攻克Vue中的css样式绑定知识点。
效果：
在页面上有一个文字“hello",点击hello的时候，文字颜色变成红色，再点击，文字颜色又变成黑色。那么颜色的变化，我们需要通过css样式来控制。
方法1：
Hello World
解释下这个写法:class='{actived:isActived}'，如果isActived是false，则class='',如果isActived是true,则class='actived'。
所以我们在data中定义了默认值false，当点击的时候会触发方法handleClick，使this.isActived等于取反的值。
方法2：
Hello World
这种方法我们是给了一个数组，数组中传递一个默认的空值isActived，当鼠标点击的时候，就会触发handleClick方法，在这里我们通过三元运算符来获取this.isActived的值。
和三元运算符同样效果的就是用if判断：
if(this.isActived==''){
this.isActived='actived';
}else{
this.isActived='';
}方法3：
在上面我们是直接用class来实现效果，那么html中style样式如何实现呢？代码并不难，我们可以仿照第二个来试试效果：
Hello World
我们默认给出一个黑色的字体颜色black，点页面文字被点击后，触发函数handleClick，这个时候我们仍然用三元运算符判断获取到this.styleObj.color的值来实现效果。
感谢各位的阅读！关于Vue中样式绑定是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网