Vue练手--实现车子品牌增删查功能

最新推荐文章于 2022-11-04 21:40:19 发布

小芒果cuty

最新推荐文章于 2022-11-04 21:40:19 发布

阅读量423

点赞数

分类专栏： Vue 文章标签： vue 过滤器 filter

csdn@小芒果cuty

本文链接：https://blog.csdn.net/caipital/article/details/108529517

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

页面效果如下：（为了好看一些，引用了bootstrap框架，如果需要可以去官方下载js、css文件）
在这里插入图片描述

将品牌列表渲染到页面：

分析：通过v-for指令渲染即可

<div class="row">
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>ctime</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 直接修改了遍历的数组 -->
            <tr v-for='item in filterData'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime | formatData}}</td>
                <td>
                    <a href="#" @click.prevent='del(item.id)'>删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

过滤日期：

方案一：用moment.js把日期过滤为2020-09-11 10:39:35这种格式

// 全局过滤器
Vue.filter('formatData',function(data){
    return moment(data).format('YYYY-MM-DD hh:mm:ss');
})

方案二：
采用原生的js，自己过滤。

Vue.filter('formatData', function (data) {
        const dt = new Date();
        const y = dt.getFullYear();
        const m = dt.getMonth() + 1;
        const d = dt.getDate();
        const hh = dt.getHours().toString().padStart(2, 0);
        const mm = dt.getMinutes().toString().padStart(2, 0);
        const ss = dt.getSeconds().toString().padStart(2, 0);
        const time = y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
        return time;
})

调用过滤器：

<td>{{item.ctime | formatData}}</td>

添加品牌：

分析：通过v-model双向绑定输入框输入的数据，点击添加按钮，把新生成的品牌对象push到brandList品牌列表这个数组中。这里的品牌对象id自增，日期为当前时间。

<input type="text" class="form-control col-sm-3" placeholder="请输入品牌名称" v-model='brand'>
<button type="button" class="btn btn-primary col-sm-1" @click='add'>添加</button>

// 添加品牌
add() {
    if(!this.brand) {
        alert('车名不能为空！')
        return;
    }
    this.brandList.push({id:++this.num,name:this.brand,ctime:new Date()})
},

删除品牌

分析：点击删除按钮，将品牌id作为参数，传给删除函数，通过id，调用数组findIndex函数找到对应的索引，再用splice方法删除对应索引项。

<a href="#" @click.prevent='del(item.id)'>删除</a>

del(k) {
    let i = this.brandList.findIndex((item,index)=>{
        if(k==item.id)    return true;
    })
    // console.log(i)
    this.brandList.splice(i,1)

品牌检索

分析：通过v-model对输入的关键字进行双向数据绑定，当输入的关键字发生变化时，品牌列表渲染到页面的值也得发生变化，这里可以用Vue的计算属性computed，当关键字发生变化，它也会自动更新，下面filterData这个就可以当做一个属性使用，不难看出，它返回的是一个数组，所以，我们的tr今后就遍历这个数组<tr v-for='item in filterData'>

<input type="text" class="form-control col-sm-3" placeholder="请输入关键字进行检索" v-model='keywords' v-focus>

computed:{
    filterData() {
        return this.brandList.filter((item,index)=>{
            return item.name.includes(this.keywords)
        })
    }
},

自定义自动获取焦点指令

// 自定义获取焦点指令
Vue.directive('focus',{
    inserted:function(el) {
        el.focus();
    }
});

绑定到输入关键字input框上：

<input type="text" class="form-control col-sm-3" placeholder="请输入关键字进行检索" v-model='keywords' v-focus>

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/_bootstrap@4.5.2@bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./node_modules/moment/moment.js"></script>
    <title>自定义全局指令让文本框获取焦点</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <div class="container">
            <div class="row">
                <input type="text" class="form-control col-sm-3" placeholder="请输入品牌名称" v-model='brand'>
                <button type="button" class="btn btn-primary col-sm-1" @click='add'>添加</button>
                <span class="col-sm-2 text-center">按照品牌名称检索：</span>
                <input type="text" class="form-control col-sm-3" placeholder="请输入关键字进行检索" v-model='keywords' v-focus>
            </div>
            <div class="row">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>ctime</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 直接修改了遍历的数组 -->
                        <tr v-for='item in filterData'>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.ctime | formatData}}</td>
                            <td>
                                <a href="#" @click.prevent='del(item.id)'>删除</a>
                            </td>
                        </tr>
                    </tbody>
    
                </table>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter('formatData',function(data){
            return moment(data).format('YYYY-MM-DD hh:mm:ss');
        })

        // 自定义获取焦点指令
        Vue.directive('focus',{
            inserted:function(el) {
                el.focus();
            }
        });

        // Vue.filter('formatData', function (data) {
        //         const dt = new Date();
        //         const y = dt.getFullYear();
        //         const m = dt.getMonth() + 1;
        //         const d = dt.getDate();
        //         const hh = dt.getHours().toString().padStart(2, 0);
        //         const mm = dt.getMinutes().toString().padStart(2, 0);
        //         const ss = dt.getSeconds().toString().padStart(2, 0);
        //         const time = y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
        //         return time;
        // })

        var vm = new Vue({
            el: '#app',
            data: {
                brand:'',
                num:4,
                keywords:'',
                brandList: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() },
                    { id: 3, name: '奥迪', ctime: new Date() },
                    { id: 4, name: '奔奔', ctime: new Date() }
                ]
            },
            // 计算属性
            computed:{
                filterData() {
                    return this.brandList.filter((item,index)=>{
                        return item.name.includes(this.keywords)
                    })
                }
            },
            methods: {
                // 删除品牌
                del(k) {
                    let i = this.brandList.findIndex((item,index)=>{
                        if(k==item.id)    return true;
                    })
                    // console.log(i)
                    this.brandList.splice(i,1)
                },
                // 添加品牌
                add() {
                    if(!this.brand) {
                        alert('车名不能为空！')
                        return;
                    }
                    this.brandList.push({id:++this.num,name:this.brand,ctime:new Date()})
                },                
            }
        });
    </script>
</body>
</html>

小芒果cuty

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue练手--实现车子品牌增删查功能

页面如下：（为了好看一些，引用了bootstrap框架，如果需要可以去官方下载js、css文件）将品牌列表渲染到页面：分析：通过v-for指令渲染即可<div class="row"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>id</th
复制链接

扫一扫

专栏目录