<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<link href="css/userList.css" rel="stylesheet" />
<style>
button.hover {}
</style>
</head>
<body>
<div id="user">
<table>
<tr>
<!-- 使用v-model来进行数据绑定，注意对应的元素名 -->
<td>账号：</td>
<td><input id="userId" v-model="user.userId" type="text" placeholder="ID" /></td>
</tr>
<tr>
<td>年龄：</td>
<td><input id="userAge" v-model="user.userAge" type="text" placeholder="0" /></td>
</tr>
<tr>
<td>性别：</td>
<!-- 对于单选框，要设置value，初始值应在vue对象中设置 -->
<td><input v-model="user.userSex" type="radio" value="0" name="gender" />男
<input v-model="user.userSex" type="radio" value="1" name="gender" />女
</td>
</tr>
<tr>
<td>图像：</td>
<td><input id="userImg" v-model="user.userImg" type="text" /></td>
</tr>
<tr>
<td><button @click="add()" v-if="user.flag==0">添加</button>
<button @click="confirm()" v-if="user.flag==1">确定</button>
</td>
</tr>
</table>
<br />
<table border="1px red solid" cellspacing="0px">
<tr>
<th class="th1">账号</th>
<th class="th2">年龄</th>
<th class="th3">性别</th>
<th class="th4">图像</th>
<th width="50px" colspan="2">操作</th>
</tr>
<!-- v-for将对象里面的数据循环取出装入到user，下面的index得到每个元素的索引值-->
<tr id="idx" v-for="(user,index) in userList">
<td class="th1">{{user.userId}}</td>
<td class="th2">{{user.userAge}}</td>
<td class="th3">{{user.userSex=="0"?"男":"女"}}</td>
<td class="th4">
<!-- 利用v-bind给标签的属性绑定数据 -->
<img v-bind:src="user.userImg" width="50px" />
</td>
<td colspan="2">
<button @click="deleteUser(index)">删除</button>
<button @click="updateUser(index)">修改</button>
</td>
</tr>
</table>
</div>
<script>
var userIndex = 0;
console.log(eval("025+12"))
new Vue({
el: "#user",
data: {
s: 12,
user: {
userId: "",
userAge: "",
userSex: "0",
userImg: "img/pic2.png",
flag: 0
},
userList: []
},
methods: {
add() {
if (this.user.userId == "") {
alert("用户账号不能为空！")
return
}
// 调用该函数的对象是vue，也就是说this指的是vue，但是我们此时要拿到user，将user装到userList里面
let user = {
userId: this.user.userId,
userAge: this.user.userAge,
userSex: this.user.userSex,
userImg: this.user.userImg
}
this.userList.push(user)
},
// 点击按钮的时候我们拿到当前对象对应的索引值，根据索引来进行删除修改
deleteUser(index) {
this.userList.splice(index, 1)
},
updateUser(index) {
// 在表单展示需要修改用户原本信息...
this.user.userId = this.userList[index].userId
this.user.userAge = this.userList[index].userAge
var gender = document.getElementsByName("gender")
if (this.userList[index].userSex == "0") {
gender[1].checked = false;
gender[0].checked = true
this.user.userSex = 0
} else {
gender[1].checked = true;
gender[0].checked = false
this.user.userSex = 1
}
var userImg = document.getElementById("userImg")
this.user.userImg = this.userList[index].userImg;
this.user.flag = 1;
userIndex = index
console.log(userIndex)
},
confirm() {
let user = {
userId: this.user.userId,
userAge: this.user.userAge,
userSex: this.user.userSex,
userImg: this.user.userImg
}
this.userList[userIndex] = user;
//上面这些步骤完成了数据的修改，但是直接对数组进行修改不会重新渲染页面
//直接修改data对象里面【页面需要存在】的值，页面会自动渲染
this.user.flag=0;
}
},
created() {
//初始化数据
this.userList = [{
userId: "旋涡名人",
userAge: 12,
userSex: 1,
userImg: "img/pic1.png"
}, {
userId: "更木剑八",
userAge: 33,
userSex: 1,
userImg: "img/pic2.png"
}, {
userId: "卡卡西",
userAge: 36,
userSex: 1,
userImg: "img/pic3.png"
}, {
userId: "小樱",
userAge: 12,
userSex: 0,
userImg: "img/pic4.png"
}, {
userId: "小丸子",
userAge: 12,
userSex: 0,
userImg: "img/pic5.png"
}];
}
});
</script>
</body>
</html>
