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>

  • 相关阅读:
    C语言与水仙花数
    C语言break和continue
    C语言中常量
    C语言中计算变量占用内存空间
    C语言中if语句
    JavaScript放置位置区别
    单选按钮中实现点击文字选中
    C语言(4)
    C语言(3)
    【第四课】kaggle案例分析四
  • 原文地址:https://www.cnblogs.com/lccluyan/p/8359522.html
Copyright © 2011-2022 走看看