3.1vue品牌案例

luyanran
195 阅读12分钟

搜索过滤等等等案例

  • 每一行属于一个对象，对象属于一个数组

  • 假数据data是一个数组

  • v-for 的循环表达式的操作 v-text注意不要有插值表达式

  • 点击添加按钮，获取两个input的值，将值组合成一个对象，push到数组中去

  • id和name可以直接从data上面获取

  • 组织出一个对象

  • 调用数组相关方法，添加到当前的data中list中去

  • 在vue中已经实现了数据的双向绑定，每当修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据应用到页面上

  • 直接将时间重新声明

  • 对表单添加完成后需要将model的值变为空值

  • 更多的是在vue中对vm 的model的数据操作

  • 添加代码

       <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./css/bootstrap.min.css">
      <script src="./lib/vue.js"></script>
  </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 for="">Id
                      <input type="text" name="" id="" v-model="id" class="form-control">
                  </label>
                  <label for="">Name
                      <input type="text" name="" id="" v-model="name" class="form-control">
                  </label>
                  <label for="">
                      <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                  </label>
              </div>
          </div>
  
          <table class="table table-bordered table-hover table-striped">
              <thead>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Ctime</th>
                  <th>Operation</th>
              </thead>
              <tbody>
                  <tr v-for="item in list" :key="item.id">
                      <td>{{item.id}}</td>
                      <td>{{item.name}}</td>
                      <td v-text="item.ctime"></td>
                      <td><a href="">删除</a></td>
                  </tr>
              </tbody>
          </table>
      </div>
      <script>
          var vm = new Vue({
              el: "#app",
              data: {
                  id: '',
                  name: '',
                  list: [
                      { id: 1, name: '奔驰', ctime: new Date() },
                      { id: 2, name: '宝马', ctime: new Date() },
                      { id: 3, name: '路虎', ctime: new Date() }
                  ]
              },
              methods: {
                  add() {
                      // 拼接对象
                      var car = { id: this.id, name: this.name, ctime: new Date() }
                      //  push对象
                      this.list.push(car)
                      this.id = this.name = ''
                  }
              }
          })
      </script>
  </body>
  
  </html>

  • 删除操作根据id删除

  • 在删除上绑定事件点击删除操作，记得a链接阻止默认行为

  • 绑定的方法直接传入id值，及item.id在循环内部，可以使用

  • 根据id找到删除对象的索引

  • 找到索引后删除，直接调用数组的splice方法

  • 查找索引，some函数

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

  • 快速找到索引，findIndex

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

  • 删除+添加

          <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <link rel="stylesheet" href="./css/bootstrap.min.css">
          <script src="./lib/vue.js"></script>
      </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 for="">Id
                          <input type="text" name="" id="" v-model="id" class="form-control">
                      </label>
                      <label for="">Name
                          <input type="text" name="" id="" v-model="name" class="form-control">
                      </label>
                      <label for="">
                          <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                      </label>
                  </div>
              </div>
      
              <table class="table table-bordered table-hover table-striped">
                  <thead>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Ctime</th>
                      <th>Operation</th>
                  </thead>
                  <tbody>
                      <tr v-for="item in list" :key="item.id">
                          <td>{{item.id}}</td>
                          <td>{{item.name}}</td>
                          <td v-text="item.ctime"></td>
                          <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                      </tr>
                  </tbody>
              </table>
          </div>
          <script>
              var vm = new Vue({
                  el: "#app",
                  data: {
                      id: '',
                      name: '',
                      list: [
                          { id: 1, name: '奔驰', ctime: new Date() },
                          { id: 2, name: '宝马', ctime: new Date() },
                          { id: 3, name: '路虎', ctime: new Date() }
                      ]
                  },
                  methods: {
                      add() {
                          // 拼接对象
                          var car = { id: this.id, name: this.name, ctime: new Date() }
                          //  push对象
                          this.list.push(car)
                          this.id = this.name = ''
                      },
                      dele(id) {
                          // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                          this.list.some((item,i)=>{
                              if(item.id === id){                        
                          // 找到索引后删除，直接调用数组的splice方法
                                  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)
                      }
                  }
              })
          </script>
      </body>
      
      </html>

  • 过滤步骤

  • 为了显示的数据不是死数据将list数据更改为方法

     <tr v-for="item in list" :key="item.id">

  • 渲染的数据根据框框改变之前v-for的数据都是由data中的list传过来的

  • 现在通过自定义一个search方法，同时把所有的关键字，通过传参数的形式将其传递给search方法

  • 在search方法内部，通过执行for循环，过滤list中所有的数据，将符合搜索关键字的数据的放入到新的数组中，返回

       search(keywords){
                 var newList=[]
                 this.list.forEach(item=>{
                     if(item.name.indexOf(keywords)!=-1){
                         newList.push(item)
                     }
                 })
                 return newList
             }

  • indexOf 过滤

      <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./css/bootstrap.min.css">
      <script src="./lib/vue.js"></script>
  </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 for="">Id
                      <input type="text" name="" id="" v-model="id" class="form-control">
                  </label>
                  <label for="">Name
                      <input type="text" name="" id="" v-model="name" class="form-control">
                  </label>
                  <label for="">
                      <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                  </label>
                  <label for="">搜索名称关键字
                      <input type="text"name="" id="" v-model="keywords" class="form-control">
                  </label>
              </div>
          </div>
  
          <table class="table table-bordered table-hover table-striped">
              <thead>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Ctime</th>
                  <th>Operation</th>
              </thead>
              <tbody>
                  <tr v-for="item in search(keywords)" :key="item.id">
                      <td>{{item.id}}</td>
                      <td>{{item.name}}</td>
                      <td v-text="item.ctime"></td>
                      <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                  </tr>
              </tbody>
          </table>
      </div>
      <script>
          var vm = new Vue({
              el: "#app",
              data: {
                  id: '',
                  name: '',
                  keywords:'',
                  list: [
                      { id: 1, name: '奔驰', ctime: new Date() },
                      { id: 2, name: '宝马', ctime: new Date() },
                      { id: 3, name: '路虎', ctime: new Date() }
                  ]
              },
              methods: {
                  add() {
                      // 拼接对象
                      var car = { id: this.id, name: this.name, ctime: new Date() }
                      //  push对象
                      this.list.push(car)
                      this.id = this.name = ''
                  },
                  dele(id) {
                      // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                      this.list.some((item,i)=>{
                          if(item.id === id){                        
                      // 找到索引后删除，直接调用数组的splice方法
                              this.list.splice(i,1)
                              // 在some方法中return true ,就会立即终止这个数组的后续循环
                              return true
                          }
                      })
                  },
                  search(keywords){
                      var newList=[]
                      this.list.forEach(item=>{
                          if(item.name.indexOf(keywords)!=-1){
                              newList.push(item)
                          }
                      })
                      return newList
                  }
              }
          })
      </script>
  </body>
  
  </html>

  • includes

          <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <link rel="stylesheet" href="./css/bootstrap.min.css">
          <script src="./lib/vue.js"></script>
      </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 for="">Id
                          <input type="text" name="" id="" v-model="id" class="form-control">
                      </label>
                      <label for="">Name
                          <input type="text" name="" id="" v-model="name" class="form-control">
                      </label>
                      <label for="">
                          <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                      </label>
                      <label for="">搜索名称关键字
                          <input type="text"name="" id="" v-model="keywords" class="form-control">
                      </label>
                  </div>
              </div>
      
              <table class="table table-bordered table-hover table-striped">
                  <thead>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Ctime</th>
                      <th>Operation</th>
                  </thead>
                  <tbody>
                      <tr v-for="item in search(keywords)" :key="item.id">
                          <td>{{item.id}}</td>
                          <td>{{item.name}}</td>
                          <td v-text="item.ctime"></td>
                          <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                      </tr>
                  </tbody>
              </table>
          </div>
          <script>
              var vm = new Vue({
                  el: "#app",
                  data: {
                      id: '',
                      name: '',
                      keywords:'',
                      list: [
                          { id: 1, name: '奔驰', ctime: new Date() },
                          { id: 2, name: '宝马', ctime: new Date() },
                          { id: 3, name: '路虎', ctime: new Date() }
                      ]
                  },
                  methods: {
                      add() {
                          // 拼接对象
                          var car = { id: this.id, name: this.name, ctime: new Date() }
                          //  push对象
                          this.list.push(car)
                          this.id = this.name = ''
                      },
                      dele(id) {
                          // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                          this.list.some((item,i)=>{
                              if(item.id === id){                        
                          // 找到索引后删除，直接调用数组的splice方法
                                  this.list.splice(i,1)
                                  // 在some方法中return true ,就会立即终止这个数组的后续循环
                                  return true
                              }
                          })
                      },
                      search(keywords){
                         ////1.2includes
                          var newList = this.list.filter(item=>{
                              // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                              // contains选取包含指定字符串的数据
                              if(item.name.includes(keywords)){
                                 return item
                              }
                          })
                          return newList
                      }
                  }
              })
          </script>
      </body>
      
      </html>

  • 时间年月过滤器

      <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>时间过滤器</title>
      <link rel="stylesheet" href="./css/bootstrap.min.css">
      <script src="./lib/vue.js"></script>
  </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 for="">Id
                      <input type="text" name="" id="" v-model="id" class="form-control">
                  </label>
                  <label for="">Name
                      <input type="text" name="" id="" v-model="name" class="form-control">
                  </label>
                  <label for="">
                      <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                  </label>
                  <label for="">搜索名称关键字
                      <input type="text" name="" id="" v-model="keywords" class="form-control">
                  </label>
              </div>
          </div>
  
          <table class="table table-bordered table-hover table-striped">
              <thead>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Ctime</th>
                  <th>Operation</th>
              </thead>
              <tbody>
                  <tr v-for="item in search(keywords)" :key="item.id">
                      <td>{{item.id}}</td>
                      <td v-text="item.name"></td>
                      <td>{{item.ctime|dateFormat}}</td>
                      <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                  </tr>
              </tbody>
          </table>
      </div>
      <script>
          // 过滤器 start
          //时间过滤器,全局，时间事件格式化
          Vue.filter('dateFormat', function (dataStr) {
              // 根据给定的字符串dataStr，得到特定的时间
              // yyyy-mm-dd   拼接
              var dt = new Date(dataStr)
              var y = dt.getFullYear()
              var m = dt.getMonth() + 1
              var d = dt.getDate()
              //连接
              // return y+'-'+m+'-'+d
              //模板字符串
              // return `yyyy-mm-dd`
              return `${y}-${m}-${d}`
          })
          // 过滤器 end
          var vm = new Vue({
              el: "#app",
              data: {
                  id: '',
                  name: '',
                  keywords: '',
                  list: [
                      { id: 1, name: '奔驰', ctime: new Date() },
                      { id: 2, name: '宝马', ctime: new Date() },
                      { id: 3, name: '路虎', ctime: new Date() }
                  ]
              },
              methods: {
                  add() {
                      // 拼接对象
                      var car = { id: this.id, name: this.name, ctime: new Date() }
                      //  push对象
                      this.list.push(car)
                      this.id = this.name = ''
                  },
                  dele(id) {
                      // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                      this.list.some((item, i) => {
                          if (item.id === id) {
                              // 找到索引后删除，直接调用数组的splice方法
                              this.list.splice(i, 1)
                              // 在some方法中return true ,就会立即终止这个数组的后续循环
                              return true
                          }
                      })
                  },
                  search(keywords) {
                      ////1.2includes
                      var newList = this.list.filter(item => {
                          // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                          // contains选取包含指定字符串的数据
                          if (item.name.includes(keywords)) {
                              return item
                          }
                      })
                      return newList
                  }
              }
          })
      </script>
  </body>
  
  </html>

  • 时间过滤器是否传值

  • 传值 年月日

        <td>{{item.ctime|dateFormat('yyyy-MM-DD')}}</td>

  • 不传值 空字符串年月日时分秒

       <td>{{item.ctime|dateFormat('')}}</td>

时间过滤器

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>时间过滤器</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <script src="./lib/vue.js"></script>
    </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 for="">Id
                        <input type="text" name="" id="" v-model="id" class="form-control">
                    </label>
                    <label for="">Name
                        <input type="text" name="" id="" v-model="name" class="form-control">
                    </label>
                    <label for="">
                        <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                    </label>
                    <label for="">搜索名称关键字
                        <input type="text" name="" id="" v-model="keywords" class="form-control">
                    </label>
                </div>
            </div>
    
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </thead>
                <tbody>
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td v-text="item.name"></td>
                        <td>{{item.ctime|dateFormat('')}}</td>
                        <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            // 过滤器 start
            //时间过滤器,全局，时间事件格式化
            Vue.filter('dateFormat', function (dataStr,pattern) {
                // 根据给定的字符串dataStr，得到特定的时间
                // yyyy-mm-dd   拼接
                var dt = new Date(dataStr)
                var y = dt.getFullYear()
                var m = dt.getMonth() + 1
                var d = dt.getDate()
                //连接
                // return y+'-'+m+'-'+d
                //模板字符串
                // return `yyyy-mm-dd`
               
                // 先变小写
                if(pattern.toLowerCase()=='yyyy-mmm-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}`
                }
            })
            // 过滤器 end
            var vm = new Vue({
                el: "#app",
                data: {
                    id: '',
                    name: '',
                    keywords: '',
                    list: [
                        { id: 1, name: '奔驰', ctime: new Date() },
                        { id: 2, name: '宝马', ctime: new Date() },
                        { id: 3, name: '路虎', ctime: new Date() }
                    ]
                },
                methods: {
                    add() {
                        // 拼接对象
                        var car = { id: this.id, name: this.name, ctime: new Date() }
                        //  push对象
                        this.list.push(car)
                        this.id = this.name = ''
                    },
                    dele(id) {
                        // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                        this.list.some((item, i) => {
                            if (item.id === id) {
                                // 找到索引后删除，直接调用数组的splice方法
                                this.list.splice(i, 1)
                                // 在some方法中return true ,就会立即终止这个数组的后续循环
                                return true
                            }
                        })
                    },
                    search(keywords) {
                        ////1.2includes
                        var newList = this.list.filter(item => {
                            // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                            // contains选取包含指定字符串的数据
                            if (item.name.includes(keywords)) {
                                return item
                            }
                        })
                        return newList
                    }
                }
            })
        </script>
    </body>
    
    </html>
  • 直接时（）无值，是underfined,短路运算只有为true才运算

html

      <td>{{item.ctime|dateFormat()}}</td>

js

传入两个参数 (dataStr,pattern)

 if(pattern&&pattern.toLowerCase()=='yyyy-mmm-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}`
        }

  • es6 优化默认传入空值 html

        <td>{{item.ctime|dateFormat()}}</td>

js

传入两个参数 (dataStr,pattern='')

 if(pattern.toLowerCase()=='yyyy-mmm-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}`
        }

最终代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>时间过滤器</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <script src="./lib/vue.js"></script>
    </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 for="">Id
                        <input type="text" name="" id="" v-model="id" class="form-control">
                    </label>
                    <label for="">Name
                        <input type="text" name="" id="" v-model="name" class="form-control">
                    </label>
                    <label for="">
                        <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                    </label>
                    <label for="">搜索名称关键字
                        <input type="text" name="" id="" v-model="keywords" class="form-control">
                    </label>
                </div>
            </div>
    
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </thead>
                <tbody>
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td v-text="item.name"></td>
                        <td>{{item.ctime|dateFormat()}}</td>
                        <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            // 过滤器 start
            //时间过滤器,全局，时间事件格式化
            Vue.filter('dateFormat', function (dataStr,pattern='') {
                // 根据给定的字符串dataStr，得到特定的时间
                // yyyy-mm-dd   拼接
                var dt = new Date(dataStr)
                var y = dt.getFullYear()
                var m = dt.getMonth() + 1
                var d = dt.getDate()
                //连接
                // return y+'-'+m+'-'+d
                //模板字符串
                // return `yyyy-mm-dd`
               
                // 先变小写
                if(pattern.toLowerCase()=='yyyy-mmm-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}`
                }
            })
            // 过滤器 end
            var vm = new Vue({
                el: "#app",
                data: {
                    id: '',
                    name: '',
                    keywords: '',
                    list: [
                        { id: 1, name: '奔驰', ctime: new Date() },
                        { id: 2, name: '宝马', ctime: new Date() },
                        { id: 3, name: '路虎', ctime: new Date() }
                    ]
                },
                methods: {
                    add() {
                        // 拼接对象
                        var car = { id: this.id, name: this.name, ctime: new Date() }
                        //  push对象
                        this.list.push(car)
                        this.id = this.name = ''
                    },
                    dele(id) {
                        // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                        this.list.some((item, i) => {
                            if (item.id === id) {
                                // 找到索引后删除，直接调用数组的splice方法
                                this.list.splice(i, 1)
                                // 在some方法中return true ,就会立即终止这个数组的后续循环
                                return true
                            }
                        })
                    },
                    search(keywords) {
                        ////1.2includes
                        var newList = this.list.filter(item => {
                            // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                            // contains选取包含指定字符串的数据
                            if (item.name.includes(keywords)) {
                                return item
                            }
                        })
                        return newList
                    }
                }
            })
        </script>
    </body>
    
    </html>
avatar
文章
阅读
粉丝