美文网首页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指令学习

    首先我们在data中定义一个数组,为items,然后在body中,添加一个ul,li来进行循环数组,其中v-for...

  • 1.1.1什么是机器学习

    指令 普通指令 具有“学习”能力的指令 编程 参数--->函数--->输出结果 数据集--->学习能力--->学习...

  • ARM 汇编指令学习:[2]ARM指令集

    ARM 汇编指令学习:[2]ARM指令集 一、跳转指令 1、 B(跳转指令)及BL(带返回跳转指令) 其中: L决...

  • 基础的汇编指令学习-2019-05-09

    基础的汇编指令学习 转载请标注出处:CSDN ARM 指令记录 指令的条件域 寄存器学习 寄存器 显示opcode...

  • Arm指令学习

    持续更新文章... 0:后缀学习 1:寻址方式 1:指令条件码 2:ARM指令 2:跳转指令 3:数据存储指令 4...

  • Linux的基本指令-Linux从入门到精通第二天(非原创)

    文章大纲 一、指令与选项二、基础指令(重点)三、进阶指令(重点)四、学习资料下载五、参考文章 一、指令与选项 什么...

  • JFinal3.0快速上手,遇见模板引擎(十九)

    前面两小节,已经学习了3个指令,接下来我们将继续学习剩下来的指令。 一、if指令 跟Java里的if一样,可以使用...

  • 汇编语言 学习笔记 (二)

    汇编语言学习笔记 三、8086基本指令 数据传送指令 通用数据传送指令 1. MOV传送指令 a. 对标志位无影响...

  • Linux命令集

    学习Linux操作系统必备的指令,基于Linux指令管理Linux操作系统,必备Linux指令有哪些? 基础命令相...

  • Git学习指令

    https://git-scm.com/book/zh/v2 1.新建一个“本地仓库”$ git init 2.配...

网友评论

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

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