1、完成人员列表的删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
姓名:<input type="text" v-model="username"><br>
性别:<input type="text" v-model="sex"><br>
<button v-on:click="add">添加数据到users</button>
</div>
<table>
<thead>
<tr>
<td></td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td><button @click="del(index)">删除数据</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
username:'',
sex:'',
users:[
{
name:'李白',
sex:'男',
},
{
name:'渣渣辉',
sex:'男',
},
{
name:'cxk',
sex:'男',
}
]
},
methods:{
add(){
user={
name:this.username,
sex:this.sex,
}
this.users.push(user);
},
del(index){
this.users.splice(index,1);
}
}
})
</script>
</body>
</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-bind用来绑定数据和属性以及表达式。
v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用。