vue-筛选

最新推荐文章于 2025-09-10 23:39:30 发布

原创最新推荐文章于 2025-09-10 23:39:30 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

私人专栏收录该内容

9 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的简单列表过滤功能。通过在输入框中输入文本，可以实时筛选出包含该文本的列表项。此示例有助于理解Vue的数据绑定及计算属性的应用。

<template>
  <div>
    <input type="text" value="" v-model="input_value">
    <ul>
      <li v-for="(item,index) in newArr" :key='index'>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      arr: ['熊大', '熊二', '光头强'],
      input_value: ''
    }
  },
  computed: {
    newArr: function(){
      var array = [];
      for(var i = 0; i < this.arr.length; i++){
        if(this.arr[i].indexOf(this.input_value) != -1){
          array.push(this.arr[i]);
        }
      }
      return array;
    }
  }
}
</script>