Vue删除

最新推荐文章于 2024-09-14 08:30:00 发布

孤星谦仔

最新推荐文章于 2024-09-14 08:30:00 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：大学学习内容文章标签： web前端

本文链接：https://blog.youkuaiyun.com/small_qianzai/article/details/101453860

大学学习内容专栏收录该内容

32 篇文章

订阅专栏

本文介绍了在Vue.js中如何实现人员列表的删除功能，详细讲解了v-for指令用于遍历不同类型的值，如对象的键值对，并展示了代码示例。同时，探讨了v-model和v-bind的区别，v-model主要用于表单元素的双向绑定，而v-bind则用于单向数据绑定，特别是在动态设置class实现动画效果时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、完成人员列表的删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</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">新增用户 </button>
    </div>
    <div>
        姓名：<input type="text" v-model="searchName"><br>
        <button @click="search">查询用户</button>
    </div>
    <table>
        <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>名字</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(user , index) in search(searchName)">
                <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>
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
            sex:'',
            searchName:'',
            users:[

                {name:'罗小黑',sex:'男'},
                {name:'罗中黑',sex:'男'},
                {name:'罗大黑',sex:'男'},
                {name:'罗超大黑',sex:'男'},
            ],

        },
        methods:{
            add(){
               // alert(this.username);
                //alert(this.sex);
                user={
                    name:this.username,
                    sex:this.sex,
                }
                this.users.push(user);
            },
            del(index){
                this.users.splice(index,1);
            },
            search(s){
                var resultArray= this.users.filter((user)=> {
                    var  flag = user.name.includes(s);
                    //console.log(user.name+this.searchName);
                    Object.values(user).join('').includes(s);
                    return flag;

                })
                return resultArray;
            }
        }
    })
</script>
</body>
</html>

2、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码
这是第 {{i}} 个P标签
迭代data中的普通对象
{{val}} — {{key}} — {{i}}
角标：{{index}}------ 键名: {{key}} ------ 值：{{value}}
3、文字叙述v-model和v-bind的差别
1.v-model:
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。
2.v-bind:
eg：v-bind:class 可简写为 :class;
当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动