Vue2.0学习笔记v-for(3)

一、v-for解决模板循环的问题，

v-for指令是循环渲染一组data中的数组，如

• 如果只是想取到值可以这么写 value in myData
• 如果要取到值和index：(value,index) in myData
  写法如下：

<div id="app">
  <ul>
      <li v-for="items in myDatas">{{items}}</li>
  </ul>
    <hr>
    <ul>
        <li v-for="(student,index) in sortStudent">
            {{index}}:{{student.name}}-{{student.age}}
        </li>
    </ul>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
           myData:[2,3,44,444,1,444,8,9],
            students:[
                {name:'小明',age:18},
                {name:'小红',age:28},
                {name:'小黄',age:20},
                {name:'小黑',age:15}
            ]
        },
        computed:{
            myDatas:function(){
                return this.myData.sort(sortNumber);
//                return [1,2,3,4,5,5,5]
            },
            sortStudent:function(){
                return sortByKey(this.students,'age');
            }

        }

    });
    function sortNumber(a,b){
        return b-a;
    }
    //数组对象方法排序:
    function sortByKey(array,key){
        return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
    }
</script>

发现vue2.0跟之前的版本还是有点不一样的，改天再写写不一样的地方加深印象。
　注意：在哪循环就把v-for指令写到哪个标签上，比如你要在li上循环数组，就不要把v-for写在ul上

二、给输出的数组进行排序

用到了Vue的computed属性。

 computed:{
            myDatas:function(){
                return this.myData.sort(sortNumber);
//                return [1,2,3,4,5,5,5]
            },
            sortStudent:function(){
                return sortByKey(this.students,'age');
            }

        }

image.png image.png

vue有种保护机制，如果在data中声明了一个属性比如这个例子的myData，然后再computed中不是赋值而是编程，为了保护data里的myData,所以不允许这样做，要重新命名一个跟myData不一样的名。输出的是新命名的数组。

image.png

为何要传一个函数给sort()?我的疑问，js基础不好，mdn走起！

image.png image.png

三、对象循环输出

  <ul>
        <li v-for="(student,index) in sortStudent">
            {{index}}:{{student.name}}-{{student.age}}
        </li>
    </ul>

大牛写了个对象排序的方法,自己好好消化

 function sortByKey(array,key){
        return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
    }

四、遇到的问题或者犯的低级错误

1、因为传入的数组没有加this,所以报了students not defined的错，粗心大意

image.png image.png

五、最后

vue低版本中 data里面的myData和computed里面可以一样，但是高版本，是不允许相同名称。
还得努力呀，进度有点慢了，就是起不来，就是不能集中精力，春节就是这样，真的是人最懒的一周了