快捷導(dǎo)航

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)文章

vue如何批量引入組件、注冊(cè)和使用詳解
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊(cè)和使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue CLI中模式與環(huán)境變量的深入詳解
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念，下面這篇文章主要給大家介紹了關(guān)于Vue CLI中模式與環(huán)境變量的相關(guān)資料，需要的朋友可以參考下
2021-05-05
解決vue表單為空也能提交的問(wèn)題
這篇文章主要介紹了解決vue表單為空也能提交的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
mpvue 單文件頁(yè)面配置詳解
這篇文章主要介紹了mpvue 單文件頁(yè)面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過(guò)配置 mpvue-config-loader 來(lái)實(shí)現(xiàn)在 vue 文件內(nèi)書寫小程序的頁(yè)面配置，感興趣的小伙伴們可以參考一下
2018-12-12
Vue實(shí)現(xiàn)通知或詳情類彈窗
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-router報(bào)錯(cuò):uncaught error during route
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題
今天小編就為大家分享一篇解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)
這篇文章主要介紹了報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06