美文网首页
Vue2.0学习笔记v-for(3)

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

作者: 小囧兔 | 来源:发表于2018-02-12 21:48 被阅读0次

一、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里面可以一样,但是高版本,是不允许相同名称。
还得努力呀,进度有点慢了,就是起不来,就是不能集中精力,春节就是这样,真的是人最懒的一周了

相关文章

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

    一、v-for解决模板循环的问题, v-for指令是循环渲染一组data中的数组,如 如果只是想取到值可以这么写 ...

  • Vue学习笔记之列表渲染

    上一篇:Vue学习笔记之条件渲染 v-for 在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-fo...

  • vue2.0之 v-for

    用 v-for 把一个数组对应为一组元素 在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for ...

  • 学习vue2.0笔记(第三章上)

    模板渲染 vue2.0种,必须使用v-bind将变量渲染到属性中, 列表渲染v-for 也可以使用v-text方法...

  • 解决v-for指令循环组件时控制台warning问题

    目前在用vue2.0做开发,在使用v-for循环组件时候效果出来了,但是出现警告 解决该问题的方法就是在需要遍历的...

  • 2018-09-10第一节vue

    v-for循环1,用vue输出内容 2,用v-for循环数组或对象 3,用v-for循环输出数组对象

  • vue2.0学习笔记

    过渡效果

  • Vue 学习笔记入门篇-小结

    Vue 学习笔记入门篇-小结 v-model的作用是? A: 双向绑定数据 v-for demo 使用v-bind...

  • vue.js源码学习笔记

    参考:vue.js官网Vue.js 源码学习笔记Vue2.0源代码阅读 文件结构梳理 整体目录 源代码实现目录 模...

  • 10 vue 遍历

    1 v-for 遍历数组 2 v-for 遍历对象 3, v-for使用过程中添加key 4 哪些数组是响应式的1...

网友评论

      本文标题:Vue2.0学习笔记v-for(3)

      本文链接:https://www.haomeiwen.com/subject/ujprtftx.html