怎样能实现通过点击不同的<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:'已禁用'
        }]
    }