如何使用計算器在輸入中過濾Vue中的`ul`？

Question

如何使用計算器來實現它？當我輸入的輸入ul只顯示li其中包括我的輸入。例如，如果我輸入廣告，則只會顯示「添加一些待辦事項」li。如果我放棄輸入，ul會放棄，所有li將再次顯示。 這是我的代碼，我使用Vue。

div id="app"> 
<input v-model="newTodo" v-on:keyup.enter="addTodo"> 
<ul> 
    <li v-for="todo in todos"> 
     <span>{{ todo.text }}</span> 
     <button v-on:click="removeTodo($index)">X</button> 
    </li> 
</ul> 

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      newTodo: '', 
      todos: [ 
       {text: 'Add some todos'} 
      ] 
     }, 
     methods: { 
      addTodo: function() { 
       var text = this.newTodo.trim() 
       if (text) { 
        this.todos.push({text: text}) 
        this.newTodo = '' 
       } 
      }, 
      removeTodo: function (index) { 
       this.todos.splice(index, 1) 
      } 
     } 
    }) 
    </script> 

Answer 1

定義computed做你想要做的過濾。 在您的v-for中使用計算器而不是todos。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    newTodo: '', 
 
    todos: [{ 
 
     text: 'Add some todos' 
 
    }] 
 
    }, 
 
    computed: { 
 
    filteredTodos: function() { 
 
     const re = new RegExp(this.newTodo, 'i'); 
 
     return this.todos.filter((item) => re.test(item.text)); 
 
    } 
 
    }, 
 
    methods: { 
 
    addTodo: function() { 
 
     var text = this.newTodo.trim() 
 
     if (text) { 
 
     this.todos.push({ 
 
      text: text 
 
     }) 
 
     this.newTodo = '' 
 
     } 
 
    }, 
 
    removeTodo: function(index) { 
 
     this.todos.splice(index, 1) 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<div id="app"> 
 
    <input v-model="newTodo" v-on:keyup.enter="addTodo"> 
 
    <ul> 
 
    <li v-for="todo in filteredTodos"> 
 
     <span>{{ todo.text }}</span> 
 
     <button v-on:click="removeTodo($index)">X</button> 
 
    </li> 
 
    </ul> 
 
</div>