Vue实现静态列表增删查功能

最新推荐文章于 2024-08-20 10:22:12 发布

罗汉爷

最新推荐文章于 2024-08-20 10:22:12 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端 # Vue实战文章标签： vue增删改查

本文链接：https://blog.youkuaiyun.com/IndexMan/article/details/88950050

Web前端同时被 2 个专栏收录

41 篇文章

订阅专栏

Vue实战

30 篇文章

订阅专栏

本文介绍如何使用Vue.js实现品牌列表展示及搜索功能，包括双向数据绑定、自定义指令、过滤器等核心概念，并演示了ES6新特性在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点

1.双向数据绑定

2.自定义指令

3.自定义过滤器

4.v-for循环对象数组

5.ES6操作数组的新方法：forEach some filter findIndex

实现效果

页面源码

<!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" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link 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" class="form-control" v-model="id" />
          </label>
          <label>
            Name:
            <input
              type="text"
              class="form-control"
              v-model="name"
              @keyup.enter="add"
            />
          </label>
          <input
            type="button"
            value="添加"
            class="btn btn-primary"
            @click="add"
          />

          <label>
            搜索名称关键字：
            <input type="text" class="form-control" v-model="keywords" v-focus/>
          </label>
        </div>
      </div>

      <table class="table table-striped table-hover table-bordered">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <!-- v-for中的数据默认是从data上的list直接渲染来的 -->
          <!-- 现在改为动态的方法查询 -->
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.ctime | dateFormate('') }}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      // 全局自定义指令
      Vue.directive('focus', {
        inserted: function(el){
          el.focus()
        }
      })
      // 全局时间过滤器
      Vue.filter('dateFormate', function(dateStr, pattern) {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt
          .getDate()
          .toString()
          .padStart(2, '0')

        // return `${y}-${m}-${d}`

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

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

      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() {
            if (this.id != '' && this.name != '') {
              var car = { id: this.id, name: this.name, ctime: new Date() }
              this.list.push(car)
              this.id = ''
              this.name = ''
            }
          },
          // 删除
          del(id) {
            // 方法一
            /* this.list.some((item,i)=>{
              if(item.id == id){
                this.list.splice(i, 1)
                return true
              }
            }) */
            // 方法二
            var index = this.list.findIndex(item => {
              if (item.id == id) {
                return true
              }
            })
            this.list.splice(index, 1)
          },
          // 条件查询
          search(keywords) {
            /* 
            方法1
            var newList = [];
            this.list.forEach(item => {
              if(item.name.indexOf(keywords) != -1){
                newList.push(item)
              }
            });
            return newList; 
            */
            // forEach some filter findIndex
            return this.list.filter(item => {
              if (item.name.includes(keywords)) {
                return item
              }
            })
          }
        }
      })
    </script>
  </body>
</html>