Vue2.x之数据绑定与实时查找筛选排序数据

柔光的暖阳◎ 2022-04-04 09:00 68阅读 0赞

预计阅读时间：6min

# 一、 前言 #

本文仅讲述基础性的原理处理方式，如果你需要找到一个函数来解决您的问题，我这边也帮不了你，学习是需要静下心来滴。如果对MVVM模式还没有真正理解到的可以参考文章：[https://blog.csdn.net/qq\_41647999/article/details/85004590][https_blog.csdn.net_qq_41647999_article_details_85004590]

# 二、 数据绑定方式 #

如果您已经知道双向绑定是什么了，可以跳过此节。

数据绑定有watch和computed两种方式。这里只讲一下常用的computed方式，喜欢折腾的朋友可以自行学习watch实现双向绑定。简单概括一下单向绑定和双向绑定，然后贴出代码。

## 1、 单项绑定 ##

比如说现在有两个输入框，分别为①和②，当在①中输入数据的时候②也会跟着变化，但是在②中输入数据的时候，①不会发生变化。

## 2、 双向绑定 ##

就和上边的单项绑定作为对比的话，无论是在①还是②输入数据的时候都会发生改变。

**实例代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>数据的绑定方式</title>
    </head>
    <body>
    <div id="demo">
      姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
      名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
      
      姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    
      姓名2(双向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    
      <p>{
       {fullName1}}</p>
      <p>{
       {fullName1}}</p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#demo',
        data: {
          firstName: 'A',
          lastName: 'B',
         
        },
    
        // 计算属性配置: 值为对象
        computed: {
          fullName1 () { // 属性的get()
            console.log('fullName1()', this)
            return this.firstName + '-' + this.lastName
          },
    
          fullName2: {
            // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
            get () {
              console.log('fullName2 get()')
              return this.firstName + '-' + this.lastName
            },
            // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
            set (value) {// fullName2的最新value值  A-B23
              console.log('fullName2 set()', value)
              // 更新firstName和lastName
              // 按照‘_’来分割，分到数组中保存起来
              const names = value.split('-')
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        },
    
      })
    
    </script>
    </body>
    </html>

# 三、 实时查找筛选排序数据 #

对于json还不懂的朋友，可参考文章：[https://blog.csdn.net/qq\_41647999/article/details/82769761][https_blog.csdn.net_qq_41647999_article_details_82769761]

先贴出代码，解释全在代码里面。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>列表渲染与过滤与排序</title>
    </head>
    <body>
    <div id="demo">
        // 在输入框绑定一个 searchName，当输入框里面已输入这个值数据就发生改变。
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(p, index) in filterPersons" :key="index">
          {
       {index}}--{
       {p.name}}--{
       {p.age}}
        </li>
      </ul>
      <div>
        <button @click="setOrderType(2)">年龄升序</button>
        <button @click="setOrderType(1)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          searchName: '',
          orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
          persons: [
            {name: 'Tom', age:18},
            {name: 'Jack', age:17},
            {name: 'Bob', age:19},
            {name: 'Mary', age:16}
          ]
        },
    
        computed: {
            //将过滤函数定义成一个计算属性
          filterPersons () {
            
            // 取出相关数据
            const {searchName, persons, orderType} = this
            //最终需要显示的数组
            // 三个点代表扩展运算符，是ES6的语法，如果arr存在就把persons的值填进去
            let arr = [...persons]
            // 过滤数组
            if(searchName.trim()) {
            //对persons进行过滤，‘=>’后面返回bool类型的值
            // indexof将name的数组下标与serchName的下标做比较，没有匹配值则返回-1
              arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
            }
            // 排序
            if(orderType) {
            // 如果下面的function返回是负数，则p1在前
              arr.sort(function (p1, p2) {
                if(orderType===1) { // 降序
                  return p2.age-p1.age
                } else { // 升序
                  return p1.age-p2.age
                }
    
              })
            }
            return arr
          }
        },
    
        methods: {
        // 更新ordertype的数值
          setOrderType (orderType) {
            this.orderType = orderType
          }
        }
      })
    </script>
    </body>
    </html>

[https_blog.csdn.net_qq_41647999_article_details_85004590]: https://blog.csdn.net/qq_41647999/article/details/85004590
[https_blog.csdn.net_qq_41647999_article_details_82769761]: https://blog.csdn.net/qq_41647999/article/details/82769761