vue 点击谁谁变色

最新推荐文章于 2023-11-01 22:51:43 发布

浮裕的小鱼干

最新推荐文章于 2023-11-01 22:51:43 发布

阅读量5.3k

点赞数 5

本文链接：https://blog.csdn.net/Cousin__/article/details/106265475

版权

vue 点击谁让谁变色（添加class属性）改变当前元素的样式

1.先设置一下要点中的样式

<style>

.active {
  border: 6px solid #ff6c00;
  color: #ff6c00;
  background: #fff7e9;
}

</style>

2. 然后就可以给我们的 li 添加点击事件

<ul id="app">

<li v-for='(item,index) in items'    @click="change(index)"   :class='{ active:index===number}'>        <!--通过切换索引值改变class-->

　　<span v-html="item.name"></span>

</li>

</ul>

3.在methods内写我们的方法，这样就实现了我们想要点击哪个就给哪个添加样式啦

<script> 

    new Vue({ 

            el: '#app', 

            data: {

                    number: 0,    //注意此处

                    items:[  {  name: "我是0", },  { name: "我是1"  },  {  name: "我是2"  }  ] 

                },

              methods: {   

                        change: function(index) {

                                    this.number= index;    //重要处

                        } 

                } 

}) 

</script>