Vue基础2：v-for及过滤与排序

最新推荐文章于 2024-07-18 15:02:06 发布

mykefei

最新推荐文章于 2024-07-18 15:02:06 发布

阅读量4.8k

点赞数 4

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/u013089490/article/details/83751242

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

数组: v-for /index。对象: v-for /key

1.v-for遍历数组

【v-for遍历数组语法】

v-for="item in items"

tems：要遍历的数组，需要在vue的data中定义好；
item：迭代得到的数组元素的别名。

【代码例子】

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>

2.v-for数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

【v-for数组角标语法】

v-for="(item,index) in items"

items：要迭代的数组；
item：迭代得到的数组元素别名；
index：迭代到的当前元素索引，从0开始。

【例子】

    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

3.v-for遍历对象

【v-for遍历对象语法】

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的值；
2个参数时，第一个参数是值，第二个参数是键；
3个参数时，第三个参数是索引，从0开始。

<div id="app">
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

4.v-for中的key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
【代码例子】

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

【key使用说明】

这里使用了一个特殊语法：:key=""它可以让你读取vue中的属性，并赋值给key属性；
这里我们绑定的key是数组的索引，应该是唯一的。

【例子】

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" key="p.id">
      {{p.id}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {id: Date.now(), name: 'xxxx', age: 23})">更新</button>
    </li>    
  </ul>
  <h2>测试: v-for 遍历对象</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
      ]
    },

    methods: {
      deleteP (index) {
       //splice再此处删除一个元素
        this.persons.splice(index, 1)
      },
      updateP (index, newP) {
        console.log(this)
        // this.persons[index].name = newP.name
        // this.persons[index].age = newP.age

        // this.persons[index] = newP // 不会更新界面
        // 删除index，在插入newP
        this.persons.splice(index, 1, newP) // vue重写后的splice方法
        // this.persons = []
      }
    },
  })

  /* 
  Vue的数据绑定如何实现
    1. vue会监视data中所有层次的属性
    2. 对象中的属性数据通过添加set方法来来实现监视
    3. 数组中的元素也实现了监视: 重写数组一系列更新元素的方法
      1). 调用原生对应的方法对元素进行处理
      2). 去更新界面
   */

</script>

5、过滤及排序

<body>
<!--
1. 列表过滤
2. 列表排序
-->
  <div id="app">
    <input type="text" v-model="searchName">
    <ul>
      <li v-for="(p, index) in filterPersons" :key="p.id">
        {{p.id}}--{{p.name}}--{{p.age}}
      </li>
    </ul>
    <button @click="sortType=2">按年龄升序</button>
    <button @click="sortType=3">按年龄降序</button>
    <button @click="sortType=1">原本顺序</button>
  </div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    data: {
      searchName: '',
      sortType: 1, // 排序的类型, 1: 不排序, 2: 升序, 3: 降序
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
      ],
    },

    computed: {
      filterPersons () {
        // 1. 得到依赖数据
        const {sortType, searchName, persons} = this

        // 2. 进行计算处理, 产生结果数据并返回
        // 过滤
        const arr = persons.filter(p => p.name.indexOf(searchName)>=0)

        // 可能需要排序
        if (sortType!==1) {
          arr.sort((p1, p2) => {
            if (sortType===2) { // 升序
              return p1.age - p2.age 
            } else { // 降序
              return p2.age - p1.age
            }
          })
        }

        return arr
      }
    },
  }).$mount('#app')
</script>
</body>