本文要给大家介绍vue的样式切换一级vue的动态样式的使用教程，下面给大家带来几个小案列，需要的朋友可以借鉴研究一下。
既然我们选择了vue，那么在做东西时就不要想着去操作dom，所有的都交给vue来解决。
下面来说一个很简单但是很常用的效果，可能人人都会用到这样的需求
导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢，
代码如下
html
附上vue中style与class绑定API
<d<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码@网&</strong><strong>搞gaodaima代码</strong>iv id="wrap" class="box"> <div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</div></div>
css
*{ padding: 0;margin: 0; } .box{ height: 40px; background: cyan; } .nav{ line-height: 40px; display: inline-block; margin-left: 100px; cursor: pointer; } .red{ color: red; } //前提是必须引入vuejs哦！var vm = new Vue({ el:"#wrap", data:{ navLists:[ { "text":"首页" }, { "text":"组件" }, { "text":"API" }, { "text":"我们" } ], changeRed:0 }, methods:{ reds:function(index){ this.changeRed = index; } } });
仔细看看我们的js代码除了模拟的数据其实就只有一个简单的逻辑处理，比起之前的各种操作dom省了好多事。
ps:vue 动态样式的解决方法
:class="{active: isActive}"
这个就没什么好说的了,但是在类名有'-'号的时候回报错，
还有一种
class="[lineStyle(courseClick)]" lineStyle(isClick){ if (isClick===true){ return 'tab-items-current' }else { return 'class-tab-items' } }
相信看了这些案例你已经掌握了方法，更多精彩请关注搞代码其它相关文章！
相关阅读：
php中最简单的字符串匹配算法，php匹配算法_PHP教程
最简单的php中字符串匹配算法教程
php如何实现栈数据结构以及括号匹配算法的代码示例详解
以上就是vue样式的切换及vue动态样式的使用教程的详细内容，更多请关注搞代码gaodaima其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue样式的切换及vue动态样式的使用教程
转载请注明原文链接：vue样式的切换及vue动态样式的使用教程
