zoukankan      html  css  js  c++  java
  • v-if和v-for一起使用的几个方法

    方法一(推荐):

    不带if

    <ul>
    <li
    v-for="(item, index) in list"
    :key="index"
    >
    {{ item.title }}
    </li>
    </ul>

    带if

    <ul v-for="(item, index) in list" :key="index">
       <li v-if="item.checked">{{item.title}}</li>
    </ul>
     data () {  // 业务逻辑里面定义的数据
        return {
          todo: '',
          list: [{
            title: '111111',
            checked: true
          }, {
            title: '22222',
            checked: false
          }]
        }
      }

    方法二(通过计算属性):过滤掉不需要的数据,剩下需要的数据再利用v-for循环遍历取出渲染

    <h2>进行中</h2>
    <ul>
       <li v-for="(item, index) in todoList" :key="index">
          <input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
       </li>
    </ul>
    <br>
    <h2>已完成</h2>
    <ul>
       <li v-for="(item, index) in doneList" :key="index" >
          <input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
       </li>
    </ul>
    data () {  // 业务逻辑里面定义的数据
        return {
          todo: '',
          list: [{
            title: '111111',
            checked: true
          }, {
            title: '22222',
            checked: false
          }]
        }
      }
    computed: {
        todoList: function() {
          return this.list.filter(function (item) {
            return item.checked
          })
        },
        doneList: function() {
          return this.list.filter(function(item) {
            return !item.checked
          })
        }
      }

  • 相关阅读:
    抓包之网络分析器- Wiresshark
    IT 技术网站收集
    XAMPP Apache + MariaDB + PHP + Perl
    http://101.132.165.115/
    LNMP 网站搭建
    10X Genomics : Single Cell Gene Expression
    PacBio下机数据如何看?
    光模块
    ubuntu 'yuan' update
    Perl 中 `cmd` 和system"cmd"的区别
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/11943448.html
Copyright © 2011-2022 走看看