Vue中如何 对用v-for绑定的数据 进行展示和隐藏

Question

怎样能实现通过点击不同的<li>，根据 acton 的属性值来对<tr>进行隐藏和显示呢？求各位指教，谢谢大家

<div class="hello">
    <ul>
      <li @click="all">all</li>
      <li>未激活</li>
      <li>进行中</li>
    </ul>
    <table>
      <tr v-for="item in items">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>
  </div>
  
  return {
      items:[
        {
          id:'A2345',
          action:'未激活'
        },
        {
          id:'B638',
          action:'进行中'
        },
        {
          id:'C863',
          action:'已禁用'
        }]
    }

Answer 1

可以参考下面代码，实现方式很多。建议楼主多读读文档，这种问题就自然解决啦。

<div class="hello">
  <ul>
    <li @click="select('all')">all</li>
    <li @click="select('unactive')">未激活</li>
    <li @click="select('active')">进行中</li>
    ...
  </ul>
  <table>
    <tr v-for="(item, index) in items" :key="index" v-if="currentType !== item.action">
      <td>{{item.id}}</td>
      <td>{{item.action}}</td>
    </tr>
  </table>
</div>


data() {
  return {
    items:[
      {
        id:'A2345',
        action:'未激活'
      },
      {
        id:'B638',
        action:'进行中'
      },
      {
        id:'C863',
        action:'已禁用'
      }],
    currentType: 'all'
  }
},
methods: {
  select(type) {
    if (type === 'all') {
      this.currentType = '全部'
    } else if (type === 'active') {
      this.currentType = '未激活'
    } ...
  }
}

Answer 2

<template>
  <div>
    <ul>
      <li v-for="item in li" @click="active = item">{{item}}</li>
    </ul>
    <table>
      <tr v-for="item in items" v-if="item.action == active || active == 'all'">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        active: 'all',
        li: ['all', '未激活', '进行中'],
        items:[
          {
            id:'A2345',
            action:'未激活'
          },
          {
            id:'B638',
            action:'进行中'
          },
          {
            id:'C863',
            action:'已禁用'
          }]
      }
    }
  }
</script>

<style lang="stylus" scoped>

</style>

Answer 3

    <table>
      <tr v-for="(item,index) in items" :key="index" v-if="item.action=='进行中'">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>

Answer 4

使用computed对items进行过滤

template

    <ul>
      <li @click="action=''">all</li>
      <li @click="action='未激活'">未激活</li>
      <li @click="action='进行中'">进行中</li>
    </ul>
    <table>
      <tr v-for="item in filterItems">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>

script

            data() {
                return {
                    action: ''
                }
            },
            computed() {
                filterItems() {
                    return this.items.filter(item => item.action.includes(this.action)
                    }
                }
            })
            

Answer 5

伪代码凑合看。