听说大家都开始用react、vue这些MVVM框架了，为了不落后，还是学学吧！（之前只对angular了解一点，时间一长，也忘得差不多了，所以学习vue相当于从小白开始）
从vue.js官网看一下，先学习几个基本指令：v-if、v-show、v-bind、v-model、v-for、v-on，然后一起做一个练习。
要实现上图功能，构思一下应该会用到什么指令，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue综合练习</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="https://unpkg.com/vue"></script>
<style>
table th,table td{
text-align: center;
}
</style>
</head>
<body >
<div id="app">
<div class="form form-horizontal col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1">
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-2 control-label">姓名：</label>
<div class=" col-lg-11 col-md-11 col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入姓名" v-model="newPerson.name"/>
</div>
</div>
<div class="form-group">
<label for="age" class="col-lg-1 col-md-1 col-sm-2 control-label">年龄：</label>
<div class=" col-lg-11 col-md-11 col-sm-10">
<input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="newPerson.age"/>
</div>
</div>
<div class="form-group">
<label for="sex" class="col-lg-1 col-md-1 col-sm-2 control-label">性别：</label>
<div class=" col-lg-11 col-md-11 col-sm-10">
<label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="男"/>男</label>
<label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="女"/>女</label>
</div>
</div>
<div class="form-group">
<button class="col-lg-1 col-md-1 col-sm-2 col-lg-offset-6 col-md-offset-6 btn btn-success" v-on:click="creat()">添加</button>
</div>
</div>
<div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1">
<table class="table table-bordered table-striped table-hover" >
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(person,index) in people">
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
<td><button class="btn btn-success" v-on:click="deletePerson(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
newPerson:{
name:"",
sex:"男",//第一次的默认值
age:"0",
},
people:[{
name:"jack",
sex:"男",
age:28,
},
{
name:"Bill",
sex:"男",
age:25,
},
{
name:"Tracy",
sex:"女",
age:20,
},
]
},
methods:{
creat:function(){
this.people.push(this.newPerson);
this.newPerson={name:"",sex:"男",age:"0"}//sex每次添加时不选择的默认值
},
deletePerson:function(index){
this.people.splice(index,1);
}
},
})
</script>
</body>
</html>
时间： 2024-10-15 16:46:46