vue.js的增删改查

来源：互联网发布：淘宝店刷钻是真的吗编辑：程序博客网时间：2024/05/22 15:17

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>模版</title>
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
font-family:Arial ,"微软雅黑";
}
.list li{
border-bottom:1px solid #ccc;
}
.list li span{
display:inline-block;
padding:0 10px;
line-height:30px;
border-right:1px solid #ccc;
}
[class^="btn-"]{
width:40px;
}
</style>
</head>

<body>
<div id="example-02">
<button class="btn-add" @click="add()">add</button>
<hr>
<ul class="list">
<li v-for="i in items">
<span>{{i.id}}</span>
<span >{{i.name}}</span>
<span>{{i.type}}</span>
<button class="btn-del" @click="del($index,i)" >-</button>
</li>
</ul>
<hr>
</div>
<script>
var vm2 = new Vue({
el:"#example-02",
data:{
items:[{id:"a",name:"yt",type:"student"}],
index:0,
letterArr:["a","b","c","d","e","f","g"]
},
methods:{
del:function (index,obj) {
console.log(index,obj);
this.items.$remove(obj);
// this.items.splice(index,1);
},
add:function () {
var _self = this;
_self.index++;
var obj = {
id:_self.letterArr[_self.index]||"x",
name:"yt",
type:"student"
};
_self.items.push(obj);
}
}
})
</script>

</body>

</html>

1 0