zoukankan      html  css  js  c++  java
  • Vue的 transition在v-for的嵌套下怎么用

    <template>
      <div>
        <div class="a" v-for="(item,index) in items">
          <a @click="btn(index)" style="cursor: pointer" :key="1">点击</a>
          <transition name="slide-fade">
            <div class="b" v-if="show[index]" :key="2">
    
            </div>
          </transition>
        </div>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            show: [],
            items: [
              {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}
            ]
          }
        },
        mounted() {
          for (let i = 0; i < this.items.length; i++) {
            this.show[i] = false;
          }
        },
        methods: {
          btn(id) {
            this.show[id] = !this.show[id];
            console.log(this.show);
          }
        }
      }
    </script>
    <style>
      .a {
         500px;
        margin: 0 auto;
        border: 1px solid;
      }
    
      .b {
         100%;
        height: 100px;
        border: 1px solid;
      }
    
      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .slide-fade-enter-active {
        transition: all .3s ease;
      }
    
      .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
    
      .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
      {
        transform: translateX(10px);
        opacity: 0;
      }
    </style>


    修改js
    <script>
      export default {
        data () {
          return {
            show: [],
            items: [
              {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}
            ]
          }
        },
        mounted () {
          for (let i = 0; i < this.items.length; i++) {
            this.$set(this.show, i, false) // 使用this.$set  关键代码
          }
        },
        methods: {
          btn (id) {
            this.$set(this.show, id, !this.show[id]) // 使用this.$set  关键代码
            console.log(this.show)
          }
        }
      }
    </script>



  • 相关阅读:
    unity导弹算法 预计目标点
    unity编辑器xml数据库插件
    简单Unity时间架构设计(克洛诺斯之匙)
    Unity武器系统的优化
    暴风魔镜安卓手柄输入检测接口
    基于unity的飞行模拟设计
    C#打印日志的小技巧
    启示录
    关于击杀与辅助奖励的方案
    unity抛物线,平均速度下的运动轨迹
  • 原文地址:https://www.cnblogs.com/tiandi0808/p/12494048.html
Copyright © 2011-2022 走看看