w3d4

最新推荐文章于 2021-08-12 21:59:40 发布

原创最新推荐文章于 2021-08-12 21:59:40 发布 · 184 阅读

CC 4.0 BY-SA版权

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使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用。