Vue中的添加、删除和搜索

最新推荐文章于 2024-04-05 22:29:42 发布

Zyl_CN

最新推荐文章于 2024-04-05 22:29:42 发布

阅读量318

点赞数

分类专栏： Vue 小练习

本文链接：https://blog.csdn.net/Zyl_CN/article/details/82968763

版权

Vue 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

小练习

32 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        h5,em,i,b {
            font-style: normal;
            font-weight: normal;
        }
        ul>li {
            list-style: none;
        }
        .top {
            width: 99%;
            border: 1px solid mediumblue;
            border-radius: 8px;
            overflow: hidden;
            font-size: 16px;
            text-indent: 20px;
            line-height: 30px;

        }
        input {
            width: 200px;
            margin: 15px 5px;
            height: 30px;
            vertical-align: middle;
        }
        input[type=button] {
            display: inline-block;
            width: 80px;
            height: 30px;
            background: #f40;
            color: #fff;
            border: none;
            outline: none;
            font-weight: 600;
            margin: 0 100px 0 20px;
        }

        .title {
            background: mediumblue;
            color: #fff;
            height: 40px;
            font-weight: 600;
            line-height: 40px;
            font-size: 16px;
        }
        .table {
            width: 99%;
            overflow: hidden;
            border: 1px solid red;
            border-radius: 6px;
            margin: 10px auto;
            text-align: center;
        }
        tr {
            height: 30px;
        }
        tr:nth-child(2n) {
            background: #ccc;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <h5 class="title">添加品牌</h5>
        ID:<input type="text" v-model="ids">
        Name:<input type="text" v-model="names">
        <input type="button" value="添加" @click="go">
        要搜索的关键字：<input type="text" v-model="search">
    </div>
    <table class="table">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>TIME</th>
            <th>ORTHER</th>
        </tr>
        <tr v-for="item in look(search)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td @click="re(item.id)"><a href="javascript:;">删除</a></td>
        </tr>
    </table>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            ids:'', //ID框
            names:'',//NAME框
            search:'',//搜索框
            //列表对象
            list:[
                {id:1,name:'张三',time:Date()},
                {id:2,name:'李四',time:Date()},
                {id:3,name:'王五',time:Date()},
                {id:4,name:'赵六',time:Date()},
            ]
        },
        methods:{
            // 添加方法
            go:function () {
                // 判断输入框是否为空
                if(this.ids!=''&&this.names!=''){
                    var flag=true;
                    var that=this
                    // 循环判断id是否已存在
                    this.list.forEach(function (item) {
                        if(that.ids==item.id){
                            flag=false;
                            alert('ID已重复');
                            return;
                        }
                    })
                    // 添加至列表中
                    if(flag){
                        this.list.push({id:this.ids,name:this.names,time:Date()});
                        this.ids='';
                        this.names='';
                    }
                }else{
                    alert('ID与NAME不能为空')
                }
            },
            // 删除
            re:function (id) {
                var flag=confirm('是否删除此Tip？');
                var that=this;
                if(flag){
                    this.list.forEach(function (item,i) {
                        if(id==item.id){
                            that.list.splice(i,1);
                            return;
                        }
                    })
                }
            },
            // 查找
            look:function (search) {
                var newList=[];
                var that=this;
                this.list.forEach(function (item) {
                    if(item.name.indexOf(that.search)!=-1){
                        newList.push(item);
                    }
                })
                return newList;
            }
        }
    })

</script>
</body>
</html>

Zyl_CN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的添加、删除和搜索

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;demo&lt;/title&gt; &lt;style&gt; * { padding: 0
复制链接

扫一扫