Vue的学习之路十三：品牌列表案例实战

最新推荐文章于 2022-06-21 14:43:39 发布

亥虫

最新推荐文章于 2022-06-21 14:43:39 发布

阅读量3.4k

点赞数

分类专栏： # Vue 文章标签： vue javascript vue.js 前端 python

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106332625

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<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 for="">
          Id:
          <input type="text" class="form-control" v-model="id" />
        </label>
        <label for="">
          Name:
          <input type="text" class="form-control" v-model="name" />
        </label>
        <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
        <input
          type="button"
          value="添加"
          class="btn btn-primary"
          @click="add"
        />
        <label for="">
          搜索关键字:
          <input type="text" class="form-control" v-model="keywords" />
        </label>
      </div>
    </div>

    <table class="table table-bordred table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <!-- 之前，v-for 中的数据，都是直接从 data 上的 list 中直接渲染过来的 -->
        <!-- 现在定义了一个 search 方法，同时把所有的关键字，通过传参的形式，传递给了search 方法 -->
        <!-- 在 search 方法内部，通过执行 for 循环，把所有符合搜索关键字的数据，保存到一个新数组中返回 -->
        <tr v-for="item in search(keywords)" :key="item.id">
          <td v-text="item.id"></td>
          <td v-text="item.name"></td>
          <td>{{ item.ctime | dateFormat('yyyy-mm-dd') }}</td>
          <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // 全局的过滤器，进行时间的格式化
    Vue.filter('dateFormat', function(dateStr, pattern=""){
      // 根据给定的时间字符串，得到特定的时间
      var dt = new Date(dateStr)
      
      // yyyy-mm-dd
      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: '奔驰', ctime: new Date() },
          { id: 2, name: '宝马', ctime: new Date() },
        ],
      },
      methods: {
        add() {
          // 添加的方法
          // 分析
          // 1. 获取到 id 和 name，直接从 data 上面获取
          // 2. 组织出一个对象
          // 3. 把这个对象，调用数组的相关方法，添加到当前data上的list中
          // 4. 在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
          // 5. 更多的是在进行 VM 中 Model 数据的操作，同时在操作 Mode 数据的时候，指定的业务逻辑操作
          if (this.id == '' || this.name == '') return
          this.list.push({ id: this.id, name: this.name, ctime: new Date() })
          this.id = this.name = ''
        },
        del(id) {
          // 根据id删除数据
          // 分析
          // 1. 如何根据 id 找到要删除对象的索引
          // 2. 如果找到索引了，直接调用 数组的 splice 方法

          // this.list.some((item, i) =>{
          //   if (item.id == id){
          //     this.list.splice(i, 1)
          //     // 在数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
          //     return true;
          //   }
          // })

          var index = this.list.findIndex((item) => {
            if (item.id == id) {
              return true
            }
          })
          this.list.splice(index, 1)
        },
        search(keywords) {
          // 根据关键字进行搜索
          // 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.indexOf(keywords) != -1)

            // 注意：ES6中，为字符串提供了一个新方法叫做，String.prototype.includes('要包含的字符串')
            // 如果包含，则返回 true，否则返回 false
            if(item.name.includes(keywords)){
              return item
            }
          })
        },
      },
    })

    // 过滤器的定义语法
    // Vue.filter('过滤器的名称', function(){})

    // 过滤器中的 function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据
    // Vue.filter('过滤器的名称', function(data){})
  </script>
</body>

知识总结：

在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
案例中的搜索通过将关键字传入search方法item in search(keywords)，search方法把所有符合关键字的数据保存到一个新数组后返回。return this.list.filter(item => {if(item.name.includes(keywords)){return item}})
扫盲：

getFullYear()：获取年
getMonth() + 1：获取月
getDate()：获取日
toLowerCase()：转为小写
getHours()：获取时
getMinutes()：获取分
getSeconds()：获取秒
${y}-${m}-${d} ${hh}:${mm}:${ss}：格式化字符串
findIndex()：用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
splice()：用于插入、删除或替换数组的元素。
filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
includes()：返回布尔值，表示是否找到了参数字符串。

亥虫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路十三：品牌列表案例实战

<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"> <la
复制链接

扫一扫