Vue2.0点击切换类名改变样式的方法
2018-09-21 21:39
1、使用index
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>vue导航tact .contact,.service .service{ background-color: skyblue; } .checked{ background: #eff4f7; } </style> </head> <body> <div id=nav> <ul> <li v-for=(relation,index) in relations v-bind:id=relation.id v-bind:id=relation.id v-bind:class={checked:index==nowIndex} v-on:click=relationClick(index)> <i></i> <span class=>{{relation.text}}</span> </li> </ul> </div> <script src=js/vue.js charset=utf-8></script> <script type=text/javascript> var nav = new Vue({ el:#nav, data:{ relations: [ {text:项目,id:program}, {text:人员,id:person}, {text:机构,id:organization}, {text:技术,id:tech}, {text:地区,id:location}, {text:国家,id:country} ], nowIndex:0 // willShow:false }, methods:{ relationClick:function(index){ this.nowIndex=index; } } }); </script> </body> </html>
2、通过改变当前值切换类名
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>点击切换</title> <style> .glyphicon-minus{ color:#08f; } .glyphicon-plus{ color:purple; } </style> <script src=js/vue.js></script> </head> <body> <div id=box> <div style=width:100px; height:100px; background: #6bacdf; v-show=isDisplay></div> <div class=form-group> <button class=btn :class=[isShow?btn-primary:] @mouseover=toggleShow() @mouseout=toggleShow() v-text=btnStyle></button> </div> <div class=> <button class=btn :class=[isTrue?glyphicon-minus:glyphicon-plus] @click=toggleBar()>切换类名按钮</button> </div> </div> <script type=text/javascript> new Vue({ el:#box, data:{ isDisplay:false, isShow: false, isTrue:true, btnStyle: Default }, methods:{ toggleShow: function() { this.isShow = !this.isShow; }, toggleBar:function(){ this.isTrue = !this.isTrue; } }, watch: { isShow: function(newVal) { // console.log(newVal); newVal ? this.btnStyle = Primary : this.btnStyle = Default } }, }); </script> </body> </html>
拓展知识：vue点击改变样式的实例
data里
isActive:-1,
method里
checkedItem(index){ this.isActive=index; },
页面里
以上这篇Vue2.0点击切换类名改变样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
文章标题：Vue2.0点击切换类名改变样式的方法
文章链接：http://soscw.com/index.php/essay/16749.html