1、完成人员列表的删除功能
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue实例：添加删除元素r</title>
<style type="text/css">
.form-group{
margin:10px;
}
.form-group>label{
display: inline-block;
width: 5rem;
text-align: right;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>姓名:</label>
<input type="text" name="" v-model='newitems.name'>
</div>
<div>
<label>年龄:</label>
<input type="text" name="" v-model='newitems.age'>
</div>
<div>
<label>性别:</label>
<select v-model='newitems.sex'>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<button v-on:click = 'addPerson'>添加</button>
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items"><!--v-for-->
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="deletePerson($index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
newitems:{
name:'',
age:'18',
sex:'女'
},
items:[{
name:'吴国中',
age:18,
sex:'女'
}]
},
methods:{
addPerson:function(){
this.items.push(this.newitems)
this.newitems = {name:'',age:'18',sex:'女'}
},
deletePerson: function(index){
this.items.splice(index,1);
}
}
})
</script>
</html>
2、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码
1、迭代数字
```
<p v-for="i in 10">这是第 {{i}} 个P标签</p>
```
2、迭代data中的普通对象
```
<div v-for="(val, key, i) in cat">{{val}} --- {{key}} --- {{i}}</div>
```
3、迭代data中的数组
` ``
<ul>
<li v-for="(item, i) in list">索引：{{i}} 姓名：{{item.name}} 年龄： {{item.age}}</li>
</ul>
```
3、文字叙述v-model和v-bind的差别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性
扫一扫
03-22
237
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
