列表渲染和列表过滤六

最新推荐文章于 2024-06-15 14:41:39 发布

米白蓝

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量230

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124174415

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div id="root">
    <ul>
      <li v-for="(p, index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
    <ul>
      <li v-for="(value, key) in auto" :key="key">
        {{key}}-{{value}}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        persons: [
          { id: 001, name: 'zhangsan', age: 20 },
          { id: 002, name: 'lisi', age: 21 },
          { id: 003, name: 'wangwu', age: 22 }
        ],
        auto: {
          name:'aodi',
          price: 10000000
        }
      }

    })
  </script>
</body>

列表渲染：

v-for：用于遍历数组(数组中是对象集合)/对象渲染到列表中；用法：v-for=“(n, index) in 数组/对象”；其中n是一个形参，代表的是数组/对象中的每一项；形参有两个，如果写两个的时候要用括号括起来，第一个表示的是每一项，第二个则表示每一项的索引值；
遍历对象的时候，形参的两个参数第一个是value，第二个是key，都是先得到值，；动态绑定key的时候就要写第二个参数；
遍历字符串是，两个形参，第一个是每一个字符，第二个是每一个字符的索引；
动态绑定:key=“id”是用于标识列表（节点）中的每一项（唯一标识，身份证）；所有元素上的key属性都是vue在使用，它使用完字后并不显示在真实dom中；
虚拟DOM对比算法时，依赖的就是key：数据改变后vue就会拿新的虚拟DOM和旧的虚拟DOM进行对比，对比的时候是根据key来对比的，相同的key进行对比有哪些地方不一样，不一样的地方就不能进行复用，就会使用新的虚拟DOM放入真实DOM，一样的就会将旧的虚拟DOM放入到真实DOM中，而用户残留的内容依旧在上面；如果全部没有变，机会直接使用原来的真实DOM；
v-for遍历的时候，如果没有写key，vue就会自动将索引值当做key来使用；
开发中最好使用数据的唯一表示，如id，学号，身份证号等；如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表使用，index作为可以值是没有问题的；

<body>
  <div id="root">
    <input type="text" placeholder="请输入关键词" v-model="keyWord">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原来顺序</button>
    <ul>
      <li v-for="(p, index) in filPers" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>
  <script>
  	// 监视属性实现过滤
    // new Vue({
    //   el: '#root',
    //   data: {
    //     keyWord: '',
    //     persons: [
    //       { id: 001, name: '荷花', age: 20, sex: '男' },
    //       { id: 002, name: '梅花', age: 21, sex: '女' },
    //       { id: 003, name: '梅雨', age: 22, sex: '男' },
    //       { id: 004, name: '春风细雨', age: 23, sex: '女' }
    //     ],
    //     filPers:[]
    //   },
    //   watch: {
    //     keyWord: {
    //       // 用于先执行一次handler函数，此时的val是一个空串，空串indexOf的时候会返回0，所有数组都会过滤成功
    //       immediate: true,
    //       handler(val) {
    //       this.filPers= this.persons.filter((p)=> {
    //         return p.name.indexOf(val) !== -1
    //       })
    //     }
    //     }
    //   }
    // })
    // 计算属性实现过滤
    new Vue({
      el: '#root',
      data: {
        sortType: 0, //0表示原顺序，1表示降序，2表示升序
        keyWord: '',
        persons: [
          { id: 001, name: '荷花', age: 88, sex: '男' },
          { id: 002, name: '梅花', age: 34, sex: '女' },
          { id: 003, name: '梅雨', age: 22, sex: '男' },
          { id: 004, name: '春风细雨', age: 25, sex: '女' }
        ]
      },
      computed: {
        filPers() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1
          })
          //列表排序
          if (this.sortType) {
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        }
      }
    })
  </script>
</body>

列表过滤：

数组方法filter(§ => {})；该方法参数是一个回调函数，函数参数是遍历的每一项，遍历返回的是复合条件的每一项；该方法不更改元素组，会返回一个新的数组；
字符串.indexOf(‘字符’)：表示这个字符是否存在这个字符串中，如果不存在，就会返回-1，存在就返回不是-1的值（索引）；
sort((a, b) =>{return a-b})：可以进行排序，有两个参数（表示数组/对象中的前一项和后一项），返回 a-b表示升序，b-a表示升序；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表渲染和列表过滤六

<body> <div id="root"> <ul> <li v-for="(p, index) in persons" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> <ul> <li v-for="(value, key) in auto" :key="key"> {{
复制链接

扫一扫