Vue 列表渲染-过滤和排序的简单示例。

最新推荐文章于 2024-07-18 14:16:17 发布

LuckXinXin

最新推荐文章于 2024-07-18 14:16:17 发布

阅读量363

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/LuckXinXin/article/details/104762227

版权

Vue 专栏收录该内容

165 篇文章 10 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表渲染-过滤和排序</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(person, index) in filterPersons" :key="person.id">
      {{index}}---{{person.id}}---{{person.name}}---{{person.age}}
    </li>
  </ul>
  <button @click="orderType=1">年龄升序</button>
  <button @click="orderType=2">年龄降序</button>
  <button @click="orderType=0">原本顺序</button>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'ZhaoHaoZhi', age: 20},
        {id: 2, name: 'HuYiChi', age: 24},
        {id: 4, name: 'DuanBin', age: 23},
        {id: 5, name: 'BaiYang', age: 21},
        {id: 7, name: 'LcukXinXin', age: 22},
      ],
      searchName: '', 
      orderType: 0, 
    },
    computed: {
      filterPersons () {
        const {persons, searchName, orderType} = this
        const arr = persons.filter((p, index) => p.name.indexOf(searchName)!==-1)
        if (orderType!==0) {
          if (orderType===2) { 
            arr.sort((p1, p2) => {
              return p2.age - p1.age
            })
          } else {  
            arr.sort((p1, p2) => {
              return p1.age - p2.age
            })
          }
        }
        return arr
      }
    }
  })
</script>
</body>
</html>