vue点击当前路由添加class怎么做?

vue点击当前路由添加class怎么做?,第1张

vue-点击当前路由增加class,其他的删除class的方法

1. 路由 *** 作

<router-link

to='/list'

v-for='(item,index) in list'

:class='{active:index==idx}'

@click='btnClass(index)'

>

2. js部分

data () {

return {

idx:0,

list:["推荐",'社会','热点','汽车','科技','财经','军事','体育']

}

},

methods: {

btnClass: function(index) {

this.idx = index

}

} (BY三人行慕课)

你可以绑定 dom 元素的 class 属性,但是你需要提前准备一些样式

方法有很多的,我这里用计算属性

代码示例

<div v-for="Mes in Messages">

   <p :class="MessClass(Mes)">{{Mes}}</p>

 </div>

data()

{

return{

 Messages:["警告:你女朋友正在与其他异性聊天!","成功:一百块法定货币到账。","信息:你女朋友正在与其他异性聊天,你不慌吗?","危险:您的账户在异地登录。"]

}

},

计算属性

computed:{

MessClass()

{

return(Arg)=>{

switch(Arg.slice(0,3))

{

case "警告:":

 return "Warning"

 case "成功:":

 return "Success"

 case "信息:":

 return "Info"

 case "危险:":

 return "Danger"

 default:

 return "Info"

}

}

}

},

css 样式

.Warning{

background-color:#E6A23C

}

.Success{

 background-color:#67C23A

}

.Info{

 background-color: #909399

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/bake/11726632.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存