1、完成人员列表的删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
姓名:<input type="text" v-model="username"><br>
性别:<input type="text" v-model="sex"><br>
<button @click="add">添加数据</button>
</div>
<table>
<thead>
<tr>
<td></td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.name">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td><button @click="del">删除数据</button></td>
</tr>
</tbody>
</table>
</div>
<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:function (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-model:主要是用在表单元素中,它实现了双向绑定,在同事使用v-bind和v-model中,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。
v-bind:当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。