Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)
更新時(shí)間：2018年09月07日 10:10:46 作者：程序媛-jjl
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
下面將介紹兩種方式實(shí)現(xiàn)動(dòng)態(tài)添加和刪除列表
1.不使用組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - vue實(shí)現(xiàn)列表增加和刪除</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newAddText" placeholder="請(qǐng)輸入要添加的內(nèi)容" />
<button @click='addNewList'>添加</button>
<ul>
<li v-for='(list,index) in lists' v-bind:key='list.id'>
{{list.title}} <button v-on:click='lists.splice(index, 1)'>刪除</button>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
newAddText:'',
lists:[
{id:1,title:'手機(jī)號(hào)碼'},
{id:2,title:'qq號(hào)'},
{id:3,title:'姓名'},
],
nextTodoId: 4
},
methods:{
addNewList:function(){
this.lists.push({
id:this.nextTodoId++,
title:this.newAddText
})
this.newAddText=''
}
}
})
</script>
</body>
</html>
初始界面：
添加一個(gè)列表：
刪除一個(gè)列表：
2.使用組件方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - vue實(shí)現(xiàn)列表增加和刪除</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newAddText" placeholder="請(qǐng)輸入要添加的內(nèi)容" />
<button @click='addNewList'>添加</button>
<ul>
<li is='list-item' v-for='(list,index) in lists' v-bind:key='list.id'
v-bind:title='list.title' v-on:remove='lists.splice(index,1)'>
</li>
</ul>
</div>
<script>
Vue.component('list-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">刪除</button>\
</li>\
',
props: ['title']
})
var vm = new Vue({
el: '#app',
data: {
newAddText:'',
lists:[
{id:1,title:'手機(jī)號(hào)碼'},
{id:2,title:'qq號(hào)'},
{id:3,title:'姓名'},
],
nextTodoId: 4
},
methods:{
addNewList:function(){
this.lists.push({
id:this.nextTodoId++,
title:this.newAddText
})
this.newAddText=''
}
}
})
</script>
</body>
</html>
效果跟上面的一樣的！
以上這篇Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue中this.$emit()方法的相關(guān)資料,this.$emit()是 Vue.js 中一個(gè)很有用的方法,可以幫助子組件向父組件傳遞事件,需要的朋友可以參考下2023-09-09
解決vue-cli 打包后自定義動(dòng)畫(huà)未執(zhí)行的問(wèn)題
今天小編就為大家分享一篇解決vue-cli 打包后自定義動(dòng)畫(huà)未執(zhí)行的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
npm?install時(shí)卡住不動(dòng)的五種解決方法
在我們安裝完Node.js之后,需要使用npm命令來(lái)安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時(shí)卡住不動(dòng)的五種解決方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家分享了一款MVVM組件，構(gòu)建自己的Vue組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
公共組件父子依賴調(diào)用及子校驗(yàn)父條件問(wèn)題解決
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗(yàn)父組件條件的問(wèn)題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家介紹了vue面試observable原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
computed作為計(jì)算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計(jì)算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)計(jì)算屬性會(huì)重新計(jì)算，更新邏輯計(jì)算的結(jié)果，這篇文章主要介紹了Vue.js中的computed的功能設(shè)計(jì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue集成百度UEditor富文本編輯器的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09