vue 点击谁 谁变色(添加class属性)改变当前元素样式

<style>

.con{ 

        color: red;

    } 

</style>

<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>

<script> 

    new Vue({ 

            el: '#app', 

            data: {

                    number: 0,    //注意此处

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

                },

              methods: {   

                        change: function(index) {

                                    this.number= index;    //重要处

                        } 

                } 

}) 

</script>

参考文章:https://www.cnblogs.com/xueweijie/p/6861702.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,896评论 6 16
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,241评论 0 6
  • vue.js简介 Vue.js读音 /vjuː/, 类似于 viewVue.js是前端三大新框架:Angular....
    LiWei_9e4b阅读 527评论 0 0
  • 惊喜过后,还是有些惊吓的。 好朋友突然告诉我,她和我的一位同学恋爱了。当时怎么也不相信,他们怎么就在一起了呢?...
    板jump鞋阅读 205评论 0 0