<div id="app">
姓名:<input type="text" v-model="form.name">
年龄:<input type="text" v-model.number="form.age">
性别:
<select v-model="form.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button @click="add">添加</button>
<br><br>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="update(index)">修改</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</table>
<!-- 弹出框的内容 -->
<template v-if="flag">
<h1>弹出框的内容</h1>
姓名:<input type="text" v-model="rform.name">
年龄:<input type="text" v-model.number="rform.age">
性别:
<select v-model="rform.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button @click="sure">确定</button>
<button @click="cancel">取消</button>
</template>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
list: [],
form: {
name: "",
age: "",
sex: ""
},
rform: {
name: "",
age: "",
sex: ""
},
flag: false,
index: ""
}
},
created() {
setTimeout(() => {
this.list = [{
name: "张三",
age: 20,
sex: "男"
}, {
name: "李四",
age: 24,
sex: "男"
}, {
name: "丽丽",
age: 29,
sex: "女"
}]
}, 500)
},
methods: {
del(i) {
console.log(i);
this.list.splice(i, 1)
},
add() {
/* this.list.splice(this.list.length,0,this.form) */
this.list.push(this.form);
/* 在原有的内存地址上 把值全部都清空
因为vue中值和视图是双向数据绑定的，所以就影响了视图 */
/* this.form.name = '';
this.form.age = '';
this.form.sex = ''; */
/* 重新创建一个新的内存地址的对象 给到this.form
所以不会影响视图 */
this.form = {
name: "",
age: "",
sex: ""
}
},
update(i) {
this.index = i;
this.rform.name = this.list[i].name
this.rform.age = this.list[i].age
this.rform.sex = this.list[i].sex
this.flag = true;
},
sure() {
// this.list[this.index].name = this.rform.name
// this.list[this.index].age = this.rform.age
// this.list[this.index].sex = this.rform.sex
this.list.splice(this.index, 1, this.rform)
this.flag = false;
},
cancel() {
this.flag = false;
}
},
})
</script>
