下面將介紹兩種方式實現動態添加和刪除列表

1.不使用組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - vue實現列表增加和刪除</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="請輸入要添加的內容" />
<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:'手機號碼'},
{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>
分享標題:Vue實現列表動態添加和刪除的兩種方法小結-創新互聯
鏈接地址:http://www.yijiale78.com/article22/idjjc.html
成都網站建設公司_創新互聯,為您提供App開發、服務器托管、用戶體驗、商城網站、外貿網站建設、ChatGPT
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯