<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<button @click="add(i)">添加</button>
<ul>
<li v-for='(item,i) in list'>
<a :href="'xxx.html?id='+item.id">{{item.name}}</a>
<button @click="del(i)">删除</button>
</li>
</ul>
</div>
<script>
let vm=new Vue({
el:"#app",
data(){
return{
list:[
{id:1001,name:"simba"},
{id:1002,name:"ace"},
{id:1003,name:"roger"},
]
}
},
methods: {
del(i){
this.list.splice(i,1)
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。
}，
add(){
this.list.push({
//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。注释：该方法会改变原始数组。
id:+new Date,
name:this.name
})
this.name=''
}
},
})
</script>
</body>
</html>
