希望明天越来越|

张尊娟

园龄:5年3个月粉丝:31关注:1

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 中国大陆许可协议进行许可。

posted @   张尊娟  阅读(1453)  评论(1编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起