Vue中如何對(duì)用v-for綁定的數(shù)據(jù) 進(jìn)行展示和隱藏

怎樣能實(shí)現(xiàn)通過點(diǎn)擊不同的<li>，根據(jù) acton 的屬性值來對(duì)<tr>進(jìn)行隱藏和顯示呢？求各位指教，謝謝大家

<div class="hello">
    <ul>
      <li @click="all">all</li>
      <li>未激活</li>
      <li>進(jìn)行中</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:'進(jìn)行中'
        },
        {
          id:'C863',
          action:'已禁用'
        }]
    }

回答

編輯回答

避風(fēng)港

偽代碼湊合看。

2018年5月30日 19:45

編輯回答

紓惘

使用computed對(duì)items進(jìn)行過濾

template

    <ul>
      <li @click="action=''">all</li>
      <li @click="action='未激活'">未激活</li>
      <li @click="action='進(jìn)行中'">進(jìn)行中</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)
                    }
                }
            })

2018年6月9日 02:51

編輯回答

貓館

可以參考下面代碼，實(shí)現(xiàn)方式很多。建議樓主多讀讀文檔，這種問題就自然解決啦。

<div class="hello">
  <ul>
    <li @click="select('all')">all</li>
    <li @click="select('unactive')">未激活</li>
    <li @click="select('active')">進(jìn)行中</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:'進(jìn)行中'
      },
      {
        id:'C863',
        action:'已禁用'
      }],
    currentType: 'all'
  }
},
methods: {
  select(type) {
    if (type === 'all') {
      this.currentType = '全部'
    } else if (type === 'active') {
      this.currentType = '未激活'
    } ...
  }
}

2018年5月27日 01:19

編輯回答

萌面人

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

2017年10月18日 06:48

編輯回答

神經(jīng)質(zhì)

<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', '未激活', '進(jìn)行中'],
        items:[
          {
            id:'A2345',
            action:'未激活'
          },
          {
            id:'B638',
            action:'進(jìn)行中'
          },
          {
            id:'C863',
            action:'已禁用'
          }]
      }
    }
  }
</script>

<style lang="stylus" scoped>

</style>

2017年1月25日 22:02