<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue2.6.14.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<fieldset>
<legend>用户注册</legend>
<p>用户名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age"></p>
<p>性别：
<input type="radio" name="a" v-model="sex" value="男">男
<input type="radio" name="a" v-model="sex" value="女">女
</p>
<p>
<button @click="add">添加</button>
<input type="reset" value="重置" @click="fn">
</p>
</fieldset>
表单内容如下：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="(item,index) in arr">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td @click="del(index)"><button>删除</button></td>
</tr>
</table>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el: "#app",
data: {
name: "",
sex: "",
age: "",
arr: []
},
methods: {
fn() {
this.name = '';
this.age = '';
this.sex = '';
},
add() {
this.arr.push(
{
name: this.name,
age: this.age,
sex: this.sex
}
)
},
del(a) {
this.arr.splice(a, 1)
}
}
})
</script>
</body>
</html>
