1、完成人员列表的删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除</title>
</head>
<body>
<div id="app">
<div style="border: 1px solid black;width: 400px;margin-bottom: 10px;text-align: center">
删除的下标<input type="text" v-model="prepDelIndex"><br>
<button @click="del">删除</button>
</div>
<table border="1" cellspacing="0" style="margin-top: 20px;">
<thead>
<tr>
<td><input type="checkbox"></td>
<td>个数</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" :key="user.name">
<td><input type="checkbox"></td>
<td v-text="index+1"></td>
<td>{{user.name}}</td>
<td v-text="user.sex"></td>
<td><input type="button" value="删除" @click="del(index)"></td>
</tr>
</tbody>
</table>
</div>
<script src="vue/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
users:[
{name:'罗小黑',sex:'男',},
{name:'罗中黑',sex:'男',},
{name:'罗大黑',sex:'男',},
{name:'aaaa',sex:'男',},
{name:'bbbb',sex:'男',},
{name:'cccc',sex:'男',},
],
name:'',
sex:'',
prepDelIndex:-1,
},
methods:{
del(i){
this.users.splice(i,1);
}
},
})
</script>
</body>
</html>
2、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码
<p v-for="保存数组中元素的变量 in 数组">{{保存数组中元素的变量}}}</p>
<p v-for="(i,index) in 10">元素值:{{i}}===下标{{index}}</p>-->
<p v-for="(value,key,index) in cat">{{key}}--{{value}}</p>
3、文字叙述v-model和v-bind的差别
v-bind是单向绑定，只能将vm的data中的数据显示到视图V中，且可以绑定不同属性名，适用于不同标签
v-model仅适用于input、select等表单元素的value属性，且这种绑定是双向的，能从data中读也能将自己value属性的值改变体现到data中。
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
