Vue實(shí)現(xiàn)列表動態(tài)添加和刪除的兩種方法小結(jié)-創(chuàng)新互聯(lián)

下面將介紹兩種方式實(shí)現(xiàn)動態(tài)添加和刪除列表

創(chuàng)新互聯(lián)公司是少有的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、營銷型企業(yè)網(wǎng)站、微信小程序定制開發(fā)、手機(jī)APP,開發(fā)、制作、設(shè)計、外鏈、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,自2013年起,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

1.不使用組件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實(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="請輸入要添加的內(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ī)號碼'},
		 {id:2,title:'qq號'},
		 {id:3,title:'姓名'},
	 ],
	 nextTodoId: 4
 },
 methods:{
	 addNewList:function(){
		 this.lists.push({
			 id:this.nextTodoId++,
			 title:this.newAddText
		 })
		 this.newAddText=''
	 }
 }	
})
 
</script>
</body>
</html>

分享標(biāo)題：Vue實(shí)現(xiàn)列表動態(tài)添加和刪除的兩種方法小結(jié)-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article22/idjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、服務(wù)器托管、用戶體驗(yàn)、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)