美文网首页vue
vueJS-V-for指令学习

vueJS-V-for指令学习

作者: jiegiser | 来源:发表于2017-09-22 13:50 被阅读0次

    首先我们在data中定义一个数组,为items,然后在body中,添加一个ul,li来进行循环数组,其中v-for指令里面的语法是, v-for=”item in items”是将items数组中的元素读取到item中,然后进行循环、

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    <body>

            <h1>v-for实例</h1>

            <div id="app">

                <ul>

                    <li v-for="item in sertitems">

                        {{item}}

                    </li>

                </ul>

                <hr>

                <ul>

                    <li v-for="(student,index)in sortStudents">

                        {{index+1}}:{{student.name}}-{{student.age}}

                    </li>

                </ul>

            </div>

        <script src="js/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                    items:[53,25,88,88,55,89,45,80],

                    students:[

                        {name:'Cat',age:11},

                        {name:'Gog',age:14},

                        {name:'People',age:111},

                        {name:'You',age:18},

                    ]

                },

                computed:{

                    sertitems:function(){

                        return this.items.sort(sortNumber);

                    },

                    sortStudents:function(){

                        return sortByKey(this.students,'age');

                    }

                }

             

            });

            function sortNumber(a,b){

                return a-b;

            }

            //数组对象方法排序:

          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>

        </body>

    2. 对循环中的值进行排序。使用computd,在items输出时,对数组进行排序。使用sort方法进行排序。

    3. 进行循环对象。

    首先定义一个数组:

    然后使用v-for进行循环读取数据,使用(student,index)可以输出数组的序号,这里的index,可以随便取名,但是在通常编程中,我们还是使用index,表示索引值,

    对对象数组进行排序,

    相关文章

      网友评论

        本文标题:vueJS-V-for指令学习

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