详解vue添加删除元素的方法
更新时间：2018年06月30日 09:41:46 作者：lily2016n
本篇文章给大家分享了vue添加删除元素的方法以及相关实例代码，有兴趣的朋友参考一下。
相关版实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实例：添加删除元素r</title>
<style type="text/css">
.form-group{
margin:10px;
}
.form-group>label{
display: inline-block;
width: 5rem;
text-align: right;
}
</style>
</head>
<body>
<div id="app">
<div class="form-group">
<label>name:</label>
<input type="text" name="" v-model='newitems.name'>
</div>
<div class="form-group">
<label>age:</label>
<input type="text" name="" v-model='newitems.age'>
</div>
<div class="form-group">
<label>sex:</label>
<select v-model='newitems.sex'>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label></label>
<button v-on:click = 'addPerson'>Create</button>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items"><!--v-for-->
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="deletePerson($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
newitems:{
name:'',
age:'18',
sex:'女'
},//newitems默认的
items:[{
name:'lily',
age:18,
sex:'女'
},{
name:'lily',
age:18,
sex:'女'
},{
name:'lily',
age:18,
sex:'女'
},{
name:'lily',
age:18,
sex:'女'
},{
name:'lily',
age:18,
sex:'女'
}]
},
methods:{
addPerson:function(){
this.items.push(this.newitems)//往items中添加newitems
this.newitems = {name:'',age:'18',sex:'女'}
},//添加元素
deletePerson: function(index){
// 删一个数组元素
this.items.splice(index,1);
}
}
})
</script>
</html>
大家可以测试以下，感谢大家对脚本之家的支持。
相关文章
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
本文主要介绍了Vue3+Element-Plus实现左侧菜单折叠与展开功能示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3.0搭配.net core实现文件上传组件，帮助大家开发Web应用程序，完成需求，感兴趣的朋友可以了解下2020-10-10
vue通过v-html指令渲染的富文本无法修改样式的解决方案
这篇文章主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家详细介绍了Vue实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了vue组件如何被其他项目引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Vue+ElementUI技巧之自定义表单项label的文字提示方法
这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了解决el-date-picker日期选择控件少一天的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了在Vue.js中使用TypeScript的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递,熟悉vue各类关系的组件之间传值方法会令开发更加得心应手,下面将对父子、兄弟、页级组件之间的传值作浅谈2023-12-12
Vue 3中引入了组合式API,它是一种新的代码组织方式,旨在让开发者更灵活地组织和重用Vue组件的逻辑,下面我们就来学习一下Vue中常见组合式API的使用吧2023-11-11
最新评论