vue列表渲染

1.区别：v-for用于数组和对象有什么不同

举个例子：

<body>
<ul id="example-1">
    <li v-for="item in items">
        {{ item }}
    </li>
    <li v-for="item in items">
        {{ item.message }}
    </li>
    <li v-for="value in object">
        {{ value }}
    </li>
    <li v-for="(value,key,index) in object">
        {{index}}.{{key}}:{{ value }}
    </li>
</ul>
</body>
</html>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ],
            object:{
                message:'Foo',
                message:'Fo'
            }
        }
    })
</script>

 

运行结果：

 

不知道大家发现了没有，最后v-for遍历对象的时候，命名对象中有两个相同的key值，但是最后都只是遍历一项，结果是最后的那个，说明默认key值最好是唯一的，如果相同，最最新的那项值显示。

 

2.使用v-for进行列表的排序过滤。

思路

过滤：使用str.filter

排序：通过使用arr.sort来判断是升序还是降序

<body>
<!--
1. 列表过滤
2. 列表排序
-->

<div id="demo">
  <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.17/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 () {
//        debugger
        // 取出相关数据
        const {searchName, persons, orderType} = this
        let arr = [...persons]
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) {
            if(orderType===1) { // 降序
              return p2.age-p1.age
            } else { // 升序
              return p1.age-p2.age
            }

          })
        }
        return arr
      }
    },

    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>
</body>
</html>

 

运行结果

 

posted @ 2019-03-04 10:49  小小小华  阅读(289)  评论(0)  编辑  收藏  举报