vue.js的增删改查

最新推荐文章于 2024-08-08 22:30:15 发布

编号90015478

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量1.7k

点赞数 1

分类专栏： vue.js学习记录 javascript 文章标签： vue.js javascript dom

本文链接：https://blog.csdn.net/qq_20353887/article/details/52050784

版权

javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

vue.js学习记录

7 篇文章 0 订阅

订阅专栏

<!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>