快捷導(dǎo)航

vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

更新時間：2019年04月11日 11:11:43 作者：增偉

這篇文章主要介紹了vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下

•簡單todolist功能的實現(xiàn)

用戶點擊提交按鈕時，將input框的內(nèi)容顯示在下方的list中，同時清空list中內(nèi)容。

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue);
          this.inputValue=''
        }
      }
    })
  </script>
</body>

“input”輸入框和“inputValue”數(shù)據(jù)雙向綁定

通過click事件，來講"inputValue"中的內(nèi)容添加到"list"中

向列表中添加數(shù)據(jù)用 push( ) this.list.pust(this.inputValue)

每次添加"list"后，把input內(nèi)容清空

•todolist組件拆分

1. Vue.component是全局組件，是vue提供的創(chuàng)建組件的方法。里面可以寫模板：template

2. 創(chuàng)建組件之后，可以直接使用。比如創(chuàng)建的組件名字是'todo-item'，就可以使用<todo-item></todo-item>

3.

 <div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{
  template:'<li>item<li>'
  })
  new Vue({
    el:"root"
  })
</script>

4.局部組件var TodoItem={}這里只寫了部分代碼

5.

div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  var TodoItem={
     template:'<li>item<li>'
  }
  new Vue({
    el:"root",
    components:{
      'todo-item':TodoItem
    } 
  })
</script>

6.
如果想在其他vue里面使用這個局部組件，需要在vue里對該局部組件進行注冊

7.當用組件來實現(xiàn)最上面的那個todolist功能時，需要進行參數(shù)的傳遞和接收，用content和props

8.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content'],
      template:'<li>{{content}}<li>'
    })
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        }
      }
    })
  </script>
</body>

9.

這里面用content來傳遞item的值，用props來接收content的值。實現(xiàn)數(shù)據(jù)的傳遞功能

• todolist的刪除功能

1.

繼續(xù)上面的代碼，當點擊list數(shù)據(jù)的時候，實現(xiàn)list的刪除功能

2.

首先來捋一下邏輯：創(chuàng)建的最外層的大組件/實例中使用了一個小的組件todoitem，我們可以認為最外層的大組件為父組件，里面的小組件為子組件。

3.

我們在父組件中通過屬性的形式給子組件傳遞了具體的內(nèi)容，然后子組件進行接收父組件傳遞的內(nèi)容，然后在子組件的模板中進行顯示。

4.

要想實現(xiàn)子組件中數(shù)據(jù)的刪除，需要刪除父組件中對應(yīng)的數(shù)據(jù)。當點擊子組件的數(shù)據(jù)時，要實現(xiàn)子組件和父組件的通信，來在父組件中進行刪除對應(yīng)數(shù)據(jù)的操作。

5.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      :index="index"
      @delete="handleDelete"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content','index'],
      template:'<li @clicl="handleClick">{{content}}<li>',
      methods:{
        handleClick:function(){
          this.$emit('delete',this.index)
        }
      }
    })
    new Vue({
      el:"#root",
      data:{
        inputValue='',
        list=[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        },
        handleDelete:function(index){
          this.list.splice(index,1)
        }
      }
    })
  </script>
</body>

總結(jié)

以上所述是小編給大家介紹的vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: