Vue实现简单的列表增删改查-蒲公英云

Vue实现简单的列表增删改查

首先引入样式文件bootstrap.min.css和vue.js

<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/js/vue.js"></script>

然后搭建出列表的新增输入框以及搜索框和展示列表

<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" class="form-control" v-model="newid" />
            </label>
            <label>
                name:
                <!-- enter回车保存-->
                <input @keyup.enter="add()" type="text" class="form-control" v-model="newname" />
            </label>
            <!-- 在vue中使用事件绑定机制，可以加（）给函数传参 -->
            <input @click="add()" type="button" value="添加" class="btn btn-primary" />
            <label>
                搜索关键字:
                <!-- 自定义指令 v-focus-->
                <input v-color="'blue'" v-focus type="text" class="form-control" v-model="keywords" />
            </label>
        </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>ctime</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 之前从list中直接渲染过来，现在自定义search方法，把关键字传递给search -->
            <tr v-for="item in search(keywords)" :ket="item">
                <td>{
   {item.id}}</td>
                <td>{
   {item.name}}</td>
                <td>{
   {item.ctime | dateFormat}}</td>
                <td>
                    <a href="" @click.prevent="del(item.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

实现效果
在这里插入图片描述

页面搭建完成后，然后使用vue实现品牌的查询、新增和删除功能。

<script type="text/javascript">
    var vm = new Vue({ 
        el: '#app',
        data: { 
            newid: '',
            newname: '',
            keywords: '',
            //品牌数据
            list: [
                {  id: 1, name: '小米', ctime: new Date() },
                {  id: 2, name: '苹果', ctime: new Date() },
                {  id: 3, name: '华为', ctime: new Date() },
                {  id: 4, name: 'vivo', ctime: new Date() },
                {  id: 5, name: 'oppo', ctime: new Date() },
            ]
        },
        methods: { 
            //添加点击事件
            add() { 
                //通过数据双向绑定将vue的数据应用到页面上
                var newid = this.newid;
                var newname = this.newname;
                var newdata = new Date();
                this.list.push({  id: newid, name: newname, ctime: newdata });
                this.newid = this.newname = "";
            },
            del(id) { //根据id删除数据
                var index = this.list.findIndex(item => { 
                    if (item.id == id) { 
                        return true;
                    }
                });
                this.list.splice(index, 1);
            },
            search(keywords) { //根据关键字进行数据搜索
                //es6 新方法includes() 判断是否包含字符串 包含返回true
                return this.list.filter(item => { 
                    if (item.name.includes(keywords)) { 
                        return item;
                    }
                });
            }
        }
    });
</script>

实现效果
在这里插入图片描述

页面上还需要进行转换，可以使用vue过滤器转换时间格式

<script type="text/javascript">
    //定义过滤器,进行时间格式化
    Vue.filter('dateFormat', function (datestr) { 
        var dt = new Date(datestr);
        var y = dt.getFullYear();
        //padStart自动补0
        var m = (dt.getMonth() + 1).toString().padStart(2, '0');
        var d = (dt.getDate()).toString().padStart(2, '0');
        return `${ y}-${ m}-${ d}`;
    });
</script>