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
          })
        }
      }

  • 相关阅读:
    关于xcode中证书安装问题
    iOSOpenDev 安装流程
    openCV
    POJ2081(Recaman's Sequence)
    POJ1163(The Triangle)
    POJ3620(Avoid The Lakes)
    POJ1160(Post Office)
    POJ3177(Redundant Paths) or POJ3352(Road Construction)
    POJ1953(World Cup Noise)
    POJ1904(King's Quest)
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/11943448.html
Copyright © 2011-2022 走看看