Vue實現(xiàn)todolist刪除功能
更新時間：2018年06月26日 14:29:00 作者：XiaopengRong
這篇文章主要介紹了Vue實現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
代碼如下所示：
<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實現(xiàn)todolist刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法
- 詳解vuex的簡單todolist例子
- webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法
- vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能實例詳解
- 使用Vue父子組件通信實現(xiàn)todolist的功能示例代碼
- Vue中父子組件通訊之todolist組件功能開發(fā)
- vue todo-list組件發(fā)布到npm上的方法
- vue組件編寫之todolist組件實例詳解
- 使用Vue完成一個簡單的todolist的方法
- Vue實現(xiàn)todo應(yīng)用的示例
相關(guān)文章
這篇文章主要介紹了vue項目打包后網(wǎng)頁的title亂碼解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
5個可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實用程序函數(shù)。具有一定的參考價值，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3新增Teleport的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue.js系列之項目結(jié)構(gòu)說明(2)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-01-01
這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細(xì)致的基礎(chǔ)語法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
關(guān)于Vue中img動態(tài)拼接src圖片地址的問題
這篇文章主要介紹了關(guān)于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue儲存storage時含有布爾值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09