周五

2019-09-22 22:03:29 作者：互联网

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}}&#45;&#45;{{value}}</p>

3、文字叙述v-model和v-bind的差别

v-bind是单向绑定，只能将vm的data中的数据显示到视图V中，且可以绑定不同属性名，适用于不同标签
v-model仅适用于input、select等表单元素的value属性，且这种绑定是双向的，能从data中读也能将自己value属性的值改变体现到data中。

标签：name,删除,绑定,value,sex,周五,data
来源： https://blog.csdn.net/Mocha_ice/article/details/101174264