欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)todolist刪除功能

 更新時(shí)間：2018年06月26日 14:29:00   作者：XiaopengRong  
這篇文章主要介紹了Vue實(shí)現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

代碼如下所示：

<div id="app">
 <input v-model="inputValue">
 <button @click="handleSumbit">提交</button>
 <todo-item v-for="(item,index) of list":key="index":content="item":index="index"
  @delete="handleDelete"></todo-item>
</div>

子組件向父組件傳遞數(shù)據(jù)使用 this.$emit('delete',this.index)該方法

<script >
 Vue.component('todo-item',{
  props:["content",'index'],
  template:"<li @click='handleSubmit'>{{content}}{{index}}</li>",
  methods:{
   handleSubmit:function () {
    this.$emit('delete',this.index)
   }
  }
 })
 new Vue({
  el:'#app',
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSumbit:function () {
    this.list.push(this.inputValue);
    this.inputValue="";
   },
   handleDelete:function (index) {
    this.list.splice(index,1)
   }
  }
 })
</script>

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)todolist刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • vue項(xiàng)目打包后網(wǎng)頁的title亂碼解決方案

    vue項(xiàng)目打包后網(wǎng)頁的title亂碼解決方案

    這篇文章主要介紹了vue項(xiàng)目打包后網(wǎng)頁的title亂碼解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 如何區(qū)分vue中的v-show 與 v-if

    如何區(qū)分vue中的v-show 與 v-if

    這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
    2020-09-09
  • 5個(gè)可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))

    5個(gè)可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))

    VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實(shí)用程序函數(shù)。具有一定的參考價(jià)值，感興趣的可以了解一下
    2021-11-11
  • vue彈窗插件實(shí)戰(zhàn)代碼

    vue彈窗插件實(shí)戰(zhàn)代碼

    這篇文章主要介紹了vue彈窗插件實(shí)戰(zhàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue3新增Teleport的問題

    vue3新增Teleport的問題

    這篇文章主要介紹了vue3新增Teleport的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)

    Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)

    這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-01-01
  • 最細(xì)致的vue.js基礎(chǔ)語法 值得收藏!

    最細(xì)致的vue.js基礎(chǔ)語法 值得收藏!

    這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細(xì)致的基礎(chǔ)語法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • 關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問題

    關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問題

    這篇文章主要介紹了關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-10-10
  • vue儲存storage時(shí)含有布爾值的解決方案

    vue儲存storage時(shí)含有布爾值的解決方案

    這篇文章主要介紹了vue儲存storage時(shí)含有布爾值的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2021-06-06
  • vue中el-tree?橫向滾動(dòng)條的實(shí)現(xiàn)

    vue中el-tree?橫向滾動(dòng)條的實(shí)現(xiàn)

    本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動(dòng)條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動(dòng)功能,感興趣的可以了解一下
    2024-09-09

最新評論