vue实现添加删除，筛选，还有自定义全局过滤器的功能

最新推荐文章于 2024-05-16 10:38:04 发布

后端切图仔

最新推荐文章于 2024-05-16 10:38:04 发布

阅读量1.6k

点赞数

分类专栏：第一次

第一次专栏收录该内容

116 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue.min.js"></script>
    <style>
#th th{
    background-color: #50a9fa;
    color: aliceblue;
    font-size: large;
}
    </style>
</head>
<body >
<div id="app" align="center">
    <input type="text" v-model="id">
    <input type="text" v-model="pname">
    <input type="text" placeholder="请输入条件筛选内容" v-model="sname">
    <button @click="addData">添加数据</button>
    <table id="th" border="1"solid width="400px">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-show="list.length==0">
            <td colspan="4">当前列表没有任何数据</td>
        </tr>
        <tr v-for="item in list |filterBy sname in 'name' ">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime|datefmt}}</td>
            <td>
                <a href="javascript:void(0)" @click="delData(item.id)">删除</a>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    //定义全局过滤器
    Vue.filter('datefmt',function (input) {
        var res="";
        var year=input.getFullYear();
        var month=input.getMonth()+1;
        var day=input.getDate();
        res=year+'-'+month+'-'+day;
        return res;//返回我们格式化以后的东西

    });
    new Vue({
        el:'#app',
        data:{
             list:[
                 {id:1,name:'奔驰',ctime:new Date},
                 {id:2,name:'奥迪',ctime:new Date},
                 {id:3,name:'丰田',ctime:new Date},
                 {id:4,name:'本田',ctime:new Date}
             ],
            id:0,
            pname:"",
            sname:""//自动获取到用户输入的条件筛选条件值
        },
        methods:{
            addData:function () {
                //包装成list要求的对象格式
                var p={id:this.id,name:this.pname,ctime:new Date()};
                //将p追加到list中
                this.list.push(p);
                //清空页面上的文本框中的数据
                this.id=0;
                this.pname="";

            },
            delData:function (id) {
                //提醒用户是否要删除数据
                if(!confirm('是否要删除数据？'))
                {//当用户点击取消按钮的时候，应该阻断这个方法中的后面的代码的继续执行





                    return ;
                }
                //调用list.findIndex()方法根据传入的id获取到这个要删除的索引值
                var index=this.list.findIndex(function (item) {
                    return item.id==id

                })
                //调用list.splice(元素的索引，元素的个数)
                this.list.splice(index,1);
            }
        }
    });
</script>
</html>

后端切图仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue实现添加删除，筛选，还有自定义全局过滤器的功能

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="/vue.min.js">script> style>#th th{ background-color: #50a9fa; color: aliceblue; font-size:
复制链接

扫一扫