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

淩亂°似流年 2022-09-14 15:23 272阅读 0赞

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

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

<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:
                    
                    <input @keyup.enter="add()" type="text" class="form-control" v-model="newname" />
                </label>
                
                <input @click="add()" type="button" value="添加" class="btn btn-primary" />
                <label>
                    搜索关键字:
                    
                    <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>
                
                <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>

实现效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

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

实现效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

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

实现效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/e495a09755b647749a3451a86cf918c6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/26000a0f906243b2a95b874765785b2a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSc56m65Lit5pyA5Lqu55qE5paw6ZGr_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/250bb577c14c46c9ad9f51c56ad55968.png