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

知识点

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>

 

posted @   一锤子技术员  阅读(10)  评论(0)  编辑  收藏  举报  
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 张高兴的大模型开发实战：（一）使用 Selenium 进行网页爬虫
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手