<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的變異方法：splice()方法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<li v-for="(v,k) in comments">
{{v.content}}
<button v-on:click="remove(k)">刪除</button>
</li>
<textarea rows="10" cols="20" v-model="current"></textarea><br/>
<button v-on:click="push('first')">在數據前面增加</button>
<button v-on:click="push('last')">在數據后面增加</button>
<br>
<button v-on:click="del('first')">刪除第一個數據</button>
<button v-on:click="del('last')">刪除最后一個數據</button>
</div>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
current:"",
comments:[
{content:'PHP'},
{content:'JAVA'}
]
},
methods:{
//增加數據的方法：
push(type){
var content={content:this.current};
switch (type){
case 'first':
this.comments.unshift(content);
break;
case 'last':
this.comments.push(content);
break;
}
this.current="";
},
//刪除數據的方法：
del(type){
switch (type){
case 'first':
this.comments.shift();
break;
case 'last':
this.comments.pop();
break;
}
},
//點擊刪除，刪除對應的數據信息：
remove(k){
this.comments.splice(k,1);
}
}
});
</script>
</body>
</html>
