w3d4

最新推荐文章于 2021-08-05 19:15:15 发布

.qmm

最新推荐文章于 2021-08-05 19:15:15 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/Qmmmmmmmmmm/article/details/101034888

版权

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来实现动画效果的场合。