zoukankan      html  css  js  c++  java
  • vue2.0 实现click点击当前li,动态切换class

    <template>
      <div>
        <ul>
          <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class="{'active':item.active,'unactive':!item.active}" >
          {{item.select}} 
          <span class="icon" v-show="item.active">当我是图标</span>
          </li>
        </ul>
      </div>
    </template>

    <script>

      import Vue from 'vue'

      export default{
        data(){
          return {
            active: false,
            items: [
              {select:'第一行'},
              {select:'第二行'},
              {select:'第三行'},
              {select:'第四行'}
            ]
          }
        },


      methods: {
        selectStyle (item, index) {

          var that = this;
          this.$nextTick(function () {
            this.items.forEach(function (item) {
              Vue.set(item,'active',false);
            });
            Vue.set(item,'active',true);
          });
        }
      }
    }
    </script>

    <!-- 样式 -->
    <style>
      .active{
        color:red;
      }
      .unactive{
        color:#000;
      }
      .icon{
        float: right;
        font-size:12px;
      }


    </style>

  • 相关阅读:
    利用观察者模式 进行不同页面的传值
    axios请求处理
    百度地图实现鼠标绘制图形并获取相关数据
    web前端支付功能
    各种好用插件汇总(持续更新...)
    记录iview表单校验的"坑"
    JavaScript字符串方法
    2020面试汇总
    JavaScript作用域
    JavaScript原型到原型链
  • 原文地址:https://www.cnblogs.com/lccluyan/p/8359522.html
Copyright © 2011-2022 走看看