zoukankan      html  css  js  c++  java
  • vant+vue控制列表展开

       <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :offset="10"
                        :immediate-check="false"
                >
    
                    <div class="comp" v-for="(item,index) in tabledata" :class="activeClass===index?'':'comp-active'">
                        <div class="cell"><span>组件名称:</span>{{item.component}}</div>
                        <div class="cell"><span>实例名称:</span>{{item.instance_name}}</div>
                        <div class="cell"><span>实例IP:</span>{{item.ip}}</div>
                        <div class="cell"><span>实例端口:</span>{{item.port}}</div>
    
                        <div class="cell expand" @click="isActive(index)" v-show="activeClass!==index">
                            <span style="float: left">...</span>
                            <van-icon name="arrow-down"/>
                        </div>
    
                        <div class="cell"><span>远程启停:</span>
                            <van-tag type="success" v-if="item.is_container">开启</van-tag>
                            <van-tag type="danger" v-else>关闭</van-tag>
                        </div>
                        <div class="cell"><span>启停脚本:</span>{{item.script}}</div>
                        <div class="cell"><span>日志路径:</span>{{item.logpath}}</div>
                        <div class="cell expand" @click="activeClass=-1">
                            <van-icon name="arrow-up"/>
                        </div>
                    </div>
    
                </van-list>
     data() {
          return {
            activeClass: -1,// 0为默认选择第一个,-1为不选择
          }
        },
        methods: {
          isActive(index){
            this.activeClass = index;
          },
  • 相关阅读:
    能用HTML/CSS解决的问题,就不要用JS
    跨域
    从输入url到页面展示到底发生了什么
    hosts 文件
    了解Web及网络基础
    hybrid
    组件化和 React
    MVVM 和 VUE
    虚拟 DOM
    ES6模块化与常用功能
  • 原文地址:https://www.cnblogs.com/cherylgi/p/14338831.html
Copyright © 2011-2022 走看看