简易的增删查案例

最新推荐文章于 2022-09-19 00:05:28 发布

原创最新推荐文章于 2022-09-19 00:05:28 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单增删查功能的示例，展示了如何通过Vue的数据绑定和事件处理来实时更新和管理列表数据。包括添加、删除记录以及通过关键词搜索特定项。

<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="id">
            </label>
            <label>
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label>
                搜索名称关键字：
                <input 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>Operation</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in search(keywords)" :key="item.id">
                <th>{{ item.id }}</th>
                <th>{{ item.name }}</th>
                <th>{{ item.ctime | dateFormat('yyyy-MM')}}</th>
                <th><a href="" @click.prevent="dele(item.id)">删除</a></th>
             </tr>
        </tbody>
    </table>
</div>

<script>

    Vue.filter('dateFormat',function (dateStr,pattern="") {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1
        var d = dt.getDate()

        if(pattern.toLowerCase() === 'yyyy-mm-dd'){
            return `${ y }--${ m }--${ d }`
        }else{
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${ y }--${ m }--${ d }    ${hh}:${mm}:${ss}`
        }

    })

    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:'111',ctime:new Date()},
                {id:2,name:'222',ctime:new Date()},
                {id:3,name:'333',ctime:new Date()}
            ]
        },
        methods: {
            add(){
                var tianjia = {id:this.id,name:this.name,ctime:new Date()}
                this.list.push(tianjia)
                this.id = this.name = ''
            },
            dele(id){
                this.list.some((item,i) => {
                    if (item.id == id){
                        this.list.splice(i,1)
                        return true
                    }
                })
            },
            search(keywords){
                 return this.list.filter(item => {
                    if (item.name.includes(keywords)){
                        return item
                    }
                })
            }
        }
    })
</script>