案例：数据管理
需求：数据管理包括对数据进行展示、动态添加、删除、修改等功能。
1、数据列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--css样式-->
<style>
.penal {
border: 1px solid #dddddd;
margin: 20px 0 0 0;
padding: 10px;
border-bottom: 0;
background-color: #d9d9d9;
}
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table > thbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th{
padding:8px;
vertical-align: top;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<h3 class="penal table">数据列表</h3>
<table class="table">
<!--表头-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr v-for="item in dataList">
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
dataList: [
{
"name": "代码骑士", "age": 210},
{
"name": "codeknight", "age": 200},
]
}
})
</script>
</html>
输出
2、数据添加
修改部分
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--css样式-->
<style>
.penal {
border: 1px solid #dddddd;
margin: 20px 0 0 0;
padding: 10px;
border-bottom: 0;
background-color: #d9d9d9;
}
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table > thbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {
padding: 8px;
vertical-align: top;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<h3 class="penal">表单区域</h3>
<div>
<div>
<label>姓名</label>
<input type="text" v-model="user">
</div>
<div>
<label>年龄</label>
<input type="text" v-model="age">
<input type="button" value="新建" @click="addUser">
</div>
</div>
<h3 class="penal table">数据列表</h3>
<table class="table">
<!--表头-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr v-for="item in dataList">
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
user: "",
age: "",
dataList: [
{
name: "代码骑士", age: 210},
{
name: "codeknight", age: 200},
]
},
methods: {
addUser: function () {
let row = {
name: this.user, age: this.age};
this.dataList.push(row);
this.user="";
this.age="";
}
}
})
</script>
</html>
输出：
3、数据删除
修改部分
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--css样式-->
<style>
.penal {
border: 1px solid #dddddd;
margin: 20px 0 0 0;
padding: 10px;
border-bottom: 0;
background-color: #d9d9d9;
}
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table > thbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {
padding: 8px;
vertical-align: top;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<h3 class="penal">表单区域</h3>
<div>
<div>
<label>姓名</label>
<input type="text" v-model="user">
</div>
<div>
<label>年龄</label>
<input type="text" v-model="age">
<input type="button" value="新建" @click="addUser">
</div>
</div>
<h3 class="penal table">数据列表</h3>
<table class="table">
<!--表头-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr v-for="(item,index) in dataList">
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
<td><!--删除时需要获取索引-->
<input type="button" value="删除" @click="deleteRow(index)"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
user: "",
age: "",
dataList: [
{
name: "代码骑士", age: 210},
{
name: "codeknight", age: 200},
]
},
methods: {
addUser: function () {
let row = {
name: this.user, age: this.age};
this.dataList.push(row);
this.user="";
this.age="";
},
deleteRow:function (index){
//根据索引删除数据列表中的值
this.dataList.splice(index,1);//删除一个索引的值
}
}
})
</script>
</html>
输出
另一种方法获取列表下标-使用v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--css样式-->
<style>
.penal {
border: 1px solid #dddddd;
margin: 20px 0 0 0;
padding: 10px;
border-bottom: 0;
background-color: #d9d9d9;
}
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table > thbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {
padding: 8px;
vertical-align: top;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<h3 class="penal">表单区域</h3>
<div>
<div>
<label>姓名</label>
<input type="text" v-model="user">
</div>
<div>
<label>年龄</label>
<input type="text" v-model="age">
<input type="button" value="新建" @click="addUser">
</div>
</div>
<h3 class="penal table">数据列表</h3>
<table class="table">
<!--表头-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr v-for="(item,index) in dataList">
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
<td><!--删除时需要获取索引-->
<input type="button" value="删除" @click="deleteRow" :data-index="index"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
user: "",
age: "",
dataList: [
{
name: "代码骑士", age: 210},
{
name: "codeknight", age: 200},
]
},
methods: {
addUser: function () {
let row = {
name: this.user, age: this.age};
this.dataList.push(row);
this.user="";
this.age="";
},
deleteRow:function (event){
//console.log(event.srcElement.dataset.index);
let index = event.target.dataset.index;
this.dataList.splice(index,1);
}
}
})
</script>
</html>
输出效果相同
4、数据修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--css样式-->
<style>
.penal {
border: 1px solid #dddddd;
margin: 20px 0 0 0;
padding: 10px;
border-bottom: 0;
background-color: #d9d9d9;
}
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table > thbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {
padding: 8px;
vertical-align: top;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<h3 class="penal">表单区域</h3>
<div>
<div>
<label>姓名</label>
<input type="text" v-model="user">
</div>
<div>
<label>年龄</label>
<input type="text" v-model="age">
<input type="button" :value="title" @click="addOrEditUser"><!-- : 是 v-bind 指令的简写，下面也是同样的-->
</div>
</div>
<h3 class="penal table">数据列表</h3>
<table class="table">
<!--表头-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr v-for="(item,index) in dataList">
<td>{
{
item.name}}</td>
<td>{
{
item.age}}</td>
<td><!--删除时需要获取索引-->
<input type="button" value="删除" @click="deleteRow" :data-index="index"/>
<input type="button" value="编辑" @click="editRow" :data-index="index"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
editIndex: undefined,
title: "新建",
user: "",
age: "",
dataList: [
{
name: "代码骑士", age: 210},
{
name: "codeknight", age: 200},
]
},
methods: {
addOrEditUser: function () {
//根据editIndex或者title的值的不同进行逻辑判断：新建还是修改
if (this.editIndex) {
//修改
this.dataList[this.editIndex].name = this.user;
this.dataList[this.editIndex].age = this.age;
} else {
//新建
let row = {
name: this.user, age: this.age};
this.dataList.push(row);
}
//清空输入框（回到默认为空的状态）
this.user = "";
this.age = "";
this.title = "新建";
this.editIndex = undefined;
},
deleteRow: function (event) {
//console.log(event.srcElement.dataset.index);
let index = event.target.dataset.index;
this.dataList.splice(index, 1);
},
editRow: function (event) {
//获取编辑行的索引
let index = event.target.dataset.index;
//获取编辑行的数据值
//let name = this.dataList[index].name;
//let age = this.dataList[index].age;
let {
name, age} = this.dataList[index];
//修改文本框里的值
this.user = name;
this.age = age;
this.title = "编辑";
this.editIndex = index;
}
}
})
</script>
</html>
输出
