詳解vue添加刪除元素的方法
更新時(shí)間：2018年06月30日 09:41:46 作者：lily2016n
本篇文章給大家分享了vue添加刪除元素的方法以及相關(guān)實(shí)例代碼，有興趣的朋友參考一下。
相關(guān)版實(shí)例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue實(shí)例：添加刪除元素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默認(rèn)的
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){
// 刪一個(gè)數(shù)組元素
this.items.splice(index,1);
}
}
})
</script>
</html>
大家可以測(cè)試以下，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過(guò)vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了從組件封裝看Vue的作用域插槽的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于怎么安裝離線vue環(huán)境的相關(guān)資料,由于公司要求在內(nèi)網(wǎng)開(kāi)發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue cli3 配置proxy代理無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue的.sync語(yǔ)法糖是一個(gè)用于雙向數(shù)據(jù)綁定的指令,可以在子組件中用來(lái)監(jiān)聽(tīng)父組件傳遞下來(lái)的props的變化,本文給大家介紹了在Vue中,.sync語(yǔ)法糖的使用方法,感興趣的朋友跟著小編一起來(lái)學(xué)習(xí)吧2024-01-01
關(guān)于vue3 vuex4 store的響應(yīng)式取值問(wèn)題解決
這篇文章主要介紹了vue3 vuex4 store的響應(yīng)式取值問(wèn)題，在實(shí)際生活中遇到這樣一個(gè)問(wèn)題:在頁(yè)面中點(diǎn)擊按鈕,數(shù)量增加,值是存在store中的,點(diǎn)擊事件值沒(méi)變,如何解決這個(gè)問(wèn)題，本文給大家分享解決方法，需要的朋友可以參考下2022-08-08
vue項(xiàng)目實(shí)現(xiàn)局部全屏完整代碼
最近需要做一個(gè)全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)局部全屏的相關(guān)資料,需要的朋友可以參考下2023-09-09