詳解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>
大家可以測試以下，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例
本文主要介紹了Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件
這篇文章主要介紹了vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件，幫助大家開發(fā)Web應(yīng)用程序，完成需求，感興趣的朋友可以了解下2020-10-10
vue通過v-html指令渲染的富文本無法修改樣式的解決方案
這篇文章主要介紹了vue通過v-html指令渲染的富文本無法修改樣式的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue組件如何被其他項(xiàng)目引用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue+ElementUI技巧之自定義表單項(xiàng)label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項(xiàng)label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了在Vue.js中使用TypeScript的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Vue常用的三種傳值方式有:??父傳子??子傳父??非父子傳值?引用官網(wǎng)的一句話:父子組件的關(guān)系可以總結(jié)為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關(guān)系的組件之間傳值方法會(huì)令開發(fā)更加得心應(yīng)手,下面將對(duì)父子、兄弟、頁級(jí)組件之間的傳值作淺談2023-12-12
Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來學(xué)習(xí)一下Vue中常見組合式API的使用吧2023-11-11