zoukankan      html  css  js  c++  java
  • vue列表渲染,以及鼠标点击改变样式的问题

    在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢?

    直接操作DOM?NO!NO!

    既然我们的项目使用了vue,为什么还有本末倒置的操作DOM呢,你只要记住vue的核心是什么,这个就容易实现了,比我们操作原生的DOM要容易多;那么怎么操作呢?

    废话少说直接上代码:

    这是html模板
    <
    template> <div class="hello"> <ul> <li v-for="(list, index) in list" :class="{'active':ind === index}" @click="changeBgc(index)">{{list}}</li> </ul> </div> </template>
     data () {
        return {
          list: ['苹果', '香蕉', '菠萝', '芒果'],
          ind: ''
        }
      },
      methods: {
        changeBgc: function (index) {
          this.ind = index
        }
      }

    效果图

    看见了没有,就是这么简单哦~~~

  • 相关阅读:
    原来 是 需要的,
    传说中的 拉伸,
    date + 排序,
    两个 header,
    招财铃,负责模块,
    一个字母,
    一个词,
    vue+webpack静态资源路径引用
    Webstorm 的 Tab 键调整缩进值
    ES6常用语法
  • 原文地址:https://www.cnblogs.com/songdongdong/p/6920827.html
Copyright © 2011-2022 走看看