vue.js如何增删DOM结构
本文介绍了vue.js如何增删DOM结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
比较简单的一个需求，一个列表或者表格比如li这样，两个按钮功能一个增加一个删除，在vue.js如何点击增加 然后可以增加一个li,点删除的话，删除一个li，求大神点拨
解决方案
一个简单的例子，希望对你有帮助！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width: 100%;
border:1px solid #ccc;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
td{
border:1px solid #ccc;
}
.opt-bar{
padding: 1em 0;
text-align: center;
}
.opt-bar button{
margin: 0 1em;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for="item in listData">
<td>{{item.user}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<div class="opt-bar">
<button @click="delLastOne">删除一条</button>
<button @click="addOne">添加一条</button>
</div>
</div>
</body>
<script src="vue2.0.5.min.js"></script>
<script>
(function(){
var vm = new Vue({
el : "#app",
data:{
listData : [
{
user : 'Cary',
sex : 'male',
age : '21'
},{
user : 'Shelly',
sex : 'female',
age : '18'
},{
user : 'Ava',
sex : 'female',
age : '28'
}
]
},
methods:{
//删除添加就是数组或对象的添加或删除，记住数据驱动
delLastOne:function(){
this.listData = this.listData.slice(1);
},
addOne : function(){
this.listData.push({
user : 'Eywa',
sex : 'female',
age : '24'
});
}
}
});
})();
</script>
</html>这篇关于vue.js如何增删DOM结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
