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

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

作者: 晚安_bd35 | 来源:发表于2019-06-04 11:05 被阅读0次

<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

相关文章

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

    .con{ color: red;} new Vue({...

  • vue.js学习笔记四

    Vue.js 样式绑定Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素...

  • vue:样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元...

  • vue点击当前元素添加class 删除兄弟元素的class

    在vue中当我们要实现点击元素动态添加类名时,我们不能像JQ那样去用(xxx.addClass(‘class’)....

  • Vue.js 样式绑定

    Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v...

  • Web-API-02

    排他操作 排他思想 所有元素全部清除样式 给当前元素设置样式 案例:表格隔行变色 案例:全选 自定义属性操作 设置...

  • Vue.js 样式绑定

    Vue.js class class与style是HTML元素的属性,用于设置元素的样式,我们可以用v-bind来...

  • 开发遇到的JS语句集

    设置元素css样式值 改变元素class样式 获取文本框的值 获取元素属性 动态属性值 删除一个父元素下面的所有子...

  • CSS . .

    class和id 同一个class属性可以出现多次 添加给不同的元素使用 用 .class 来添加css样式而id...

  • vue 高级技巧

    1.css 局部样式 vue 中style样式添加scoped属性表示它的样式只作用于当前组件,样式私有化。 但是...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/eodcxctx.html