Vue.js實現(xiàn)的表格增加刪除demo示例
更新時間：2018年05月22日 14:49:59 作者：lucky芬
這篇文章主要介紹了Vue.js實現(xiàn)的表格增加刪除demo,結合實例形式分析了vue.js數(shù)據(jù)綁定及元素增加、刪除等相關操作技巧,需要的朋友可以參考下
本文實例講述了Vue.js實現(xiàn)的表格增加刪除demo。分享給大家供大家參考，具體如下：
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
使用本站在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun，得到如下所示的運行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js小demo</title>
<link rel="stylesheet" rel="external nofollow" >
<style>
label{float:left;line-height: 34px;}
.panel-body{
margin:30px auto;
}
</style>
</head>
<body>
<!-- 這是我們的view -->
<div class="col-md-6">
<div class="panel panel-default" id="app" >
<div class="panel-body">
<div class="form-group">
<label class="col-md-2 control-label">Name：</label>
<input type="text" class="col-md-9 form-control" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age：</label>
<input type="text" class="col-md-9 form-control" v-model="newPerson.age">
</div>
<div class="form-group">
<label class="col-md-2 control-label">Sex：</label>
<select class="col-md-9 form-control" v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label class="col-md-8"></label>
<button class="col-md-3" @click="createPerson">Create</button>
</div>
</div>
<div class="panel-body">
<table class="table text-center">
<thead>
<tr >
<th class="text-center">Name</th>
<th class="text-center">Age</th>
<th class="text-center">Sex</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td><button v-on:click="delPerson($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
//創(chuàng)建一個Vue實例或"ViewModel",它連接view與model
var vm = new Vue({
el: '#app',
data: {
newPerson: {
name: '',
age: '',
sex: 'Male'
},
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
},
methods:{
createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson對象后，重置newPerson對象
this.newPerson = {name: '', age: '', sex: 'Male'}
},
delPerson: function(index){
// 刪一個數(shù)組元素
this.people.splice(index,1);
}
}
});
</script>
</html>
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了教你用Cordova打包Vue項目的方法，詳細的介紹了如何Vue項目打包成app，具有一定的參考價值，有興趣的可以了解一下2017-10-10
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應用，相比基于Vue-cli創(chuàng)建的應用少了很多配置文件和依賴，下面基于Vite相關資料內容，需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了Vue如何實現(xiàn)變量表達式選擇器，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-02-02
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本文主要介紹了vue3開啟攝像頭并進行拍照的實現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue項目中遇到的深拷貝淺拷貝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue-cli打包后如何本地查看的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue自定義屬性,結合實例形式分析了vue.js自定義屬性相關原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2019-02-02
vue3+elementPlus二次封裝表單的實現(xiàn)代碼
最近使用Vue3+ElementPlus開發(fā)項目，從整體上構思組件的封裝。能寫成組件的內容都進行封裝，方便多個地方使用，這篇文章給大家介紹了vue3+elementPlus二次封裝表單的實現(xiàn)，并通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07