一用这个方法就白屏,也没有报错,后来进vue官网一查才知道,filterBy被替换了

以前是这样的写法:

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

最新的方法:在 computed 属性中使用 js 内置方法 .filter method

<p v-for="user in filteredUsers">{{ user.name }}</p>
computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

自己的案例:

<div id="app">
  <label for="filterName">筛选:</label>
  <input v-model="searchText" id="filterName">
  <ol>
    <li v-for="user in filterName">{{user.name}}</li>
  </ol>
</div>
<script>
  let fb = new Vue(
    {
      el: '#app',
      data: {
        searchText: '',
        msg: '飞机车',
        users: [
          {
            name: '快车',
            tag: 1,
          },
          {
            name: '出租车',
            tag: 2,
          },
          {
            name: '顺风车',
            tag: 3,
          },
          {
            name: '专车',
            tag: 4,
          }
        ]
      },
      computed:{
        filterName:function () {
          let self=this
          return self.users.filter(function (user) {
            return user.name.indexOf(self.searchText)!==-1
          })
        }
      }
    }
  );
</script>
Logo

前往低代码交流专区

更多推荐