Vue小项目之品牌管理案例

最新推荐文章于 2024-07-23 17:22:52 发布

啊祝arzhu

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量362

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41889956/article/details/93420936

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link type="text/css" rel="stylesheet" href="main.css">
    <link type="text/css" rel="stylesheet" href="lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                ID:<input type="text" v-model="id" class="form-control">
            </label>
            <label>
                name:<input type="text" v-model="name" class="form-control" @keyup.113="add">
            </label>
            <!--这里的add我们添加双括号和不加双括号的含义是，添加双括号有助于我们传入参数-->
            <input type="button" value="添加" @click="add" class="btn btn-primary">
            <label>
                <!--这里我们使用了v-model="keywords"将用户在表单中传入的数据传输到data中-->
                搜索：<input class="form-control" type="text" v-model="keywords" v-focus v-color="'blue'">
            </label>
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>品牌</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--我们这里使用到了v-for来迭代一个函数返回的对象，这么做也是可行的-->
        <!--这里有一个小细节，当我们不需要搜索框就查看整个页面时，我们同样触发了search函数，搜索框的值为空字符串时，indexOf()=0于是就显示出了所有的结果-->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime|dataFormat()}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

</body>
<script>
    Vue.directive('focus',{
        inserted:function (el) {
            el.focus();
        }
    });
    Vue.directive('color',{
        bind:function (el,binding) {
            el.style.color=binding.expression;

        }
    });
    Vue.filter("dataFormat",function (dataStr,pattern="") {
        //根据传入的时间字符串，转化成时间类型变量
        var dt=new Date(dataStr);
        var y=dt.getFullYear();   //得到年
        var m=dt.getMonth();    //得到月
        var d=dt.getDate();    //得到日
        //return y+'年'+m+'月'+d+'日';
        if(pattern.toLowerCase()==='yyyy-mm-dd'){
            //我们也可以这么写，tab上的那个键输出`在${}中插入变量，其他位置放要显示的字符串
            return `${y}年${m}月${d}日`;
        }else{
            var hh=dt.getHours();  //得到小时
            var mm=dt.getMinutes();  //得到分
            return `${y}年${m}月${d}日 ${hh}时${mm}分`;
        }

    });
    var vm=new Vue({
        el:"#app",
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()}
            ]
        },
        methods:{
            add:function () {
                var cre={id:this.id,name:this.name,ctime:new Date()};
                this.list.push(cre);
                this.id='';
                this.name='';
            },
            del:function (id) {
                var index=this.list.findIndex(function(item){
                    if(item.id==this.id){
                        return true
                    }
                });
                this.list.splice(index,1);
            },
            search:function (keywords) {
                var newList=[];
                /*this.list.forEach(function (item) {
                    if(item.name.indexOf(keywords)!=-1){

                    } newList.push(item);
                });
             return newList;*/
                newList = this.list.filter(function (item) {
                    if(item.name.includes(keywords)){
                        return item;
                    }
                });
                return newList;
            }
        },
        filters:{
            dataFormat:function (dataStr,pattern="") {
                //根据传入的时间字符串，转化成时间类型变量
                var dt=new Date(dataStr);
                var y=dt.getFullYear();   //得到年
                var m=dt.getMonth();    //得到月
                var d=dt.getDate();    //得到日
                //return y+'年'+m+'月'+d+'日';
                if(pattern.toLowerCase()==='yyyy-mm-dd'){
                    //我们也可以这么写，tab上的那个键输出`在${}中插入变量，其他位置放要显示的字符串
                    return `${y}年${m}月${d}日`;
                }else{
                    var hh=dt.getHours();  //得到小时
                    var mm=dt.getMinutes();  //得到分
                    return `${y}年${m}月${d}日 ${hh}时${mm}分`;
                }

            }
        }
    })
</script>
</html>

运行截图：