实现的效果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.left {
float: left;
width: 30%;
margin-left: 20%;
}
.right {
float: left;
width: 30%;
}
.like {
list-style: none;
}
.like li {
float: left;
}
td {
vertical-align: center;
}
.aihaoXuanXiang {
list-style: none;
}
.aihaoXuanXiang li {
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<div id="app">
<div class="left">
<table>
<tr>
<td> 姓名:</td>
<td><input type="text" v-model="mingZi"/> <br/></td>
</tr>
<tr>
<td> 密码:</td>
<td><input type="password" v-model="pwd"/></td>
</tr>
<tr>
<td> 爱好:</td>
<td>
<ul class="like">
<li v-for="item in likes"><input type="checkbox" v-model="likes_select" :value="item"/>{{item}}
</li>
</ul>
</td>
</tr>
<tr>
<td style="column-span: 2">
<button @click="tianjia">添加</button>
</td>
</tr>
</table>
</div>
<div class="right">
<p v-show="infos.length==0">目前还没有信息,请尽快添加信息!!!</p>
<p v-show="infos.length!=0">添加所有的成员信息展示如下:</p>
<ul>
<li v-for="(item ,index) in infos" >
{{item.mingZi}}--{{item.pwd}}
<ul class="aihaoXuanXiang">
<li v-for="itt in item.likes_select">{{itt}}</li>
</ul>
<button @click="del(index)">删除</button>
</li>
</ul>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
mingZi: "xuhaitao",
pwd: "123456",
likes_select: [],
likes: ["篮球", "足球", "排球", "乒乓球"],
infos: []
},
methods: {
tianjia() {
const vv = {"mingZi": this.mingZi, "pwd": this.pwd, "likes_select": this.likes_select}
this.infos.unshift(vv)
},
del(vall){
this.infos.splice(vall,1)
}
}
})
</script>
</html>
FR:徐海涛(hunk Xu)
QQ技术交流群:386476712