vue中如何实现点击动态切换样式
循环的情况
步骤:
1.点击时传入index索引 ---------------->获取当前点击的是哪条数据
@click="addClass(index)"
2.将索引值传入class---------------------->索引为哪个就给哪个加上想要样式
:class="{secs : index== inde}"
3.在data里面添加inde :0---------------->默认索引为0添加样式
data(){
return{
inde:0,
4.最后在methods里添加方法
methods:{
addClass(index){
this.inde = index
},
非循环的情况
<div class="fund_box">
<el class="{active:actives == 1}" click="active(1)">投资</el>
<el class="{active:actives == 2}" click="active(2)">捐赠</el>
</div>
methods: {
active(index){
this.actives = index;
}
}
本文作者:张尊娟
本文链接:https://www.cnblogs.com/wszzj/p/12753198.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步