<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.flag = false;
},
cancel(){
this.flag = false;
}
},
})
</script>
网友评论