v-for 指令

忘是亡心i 2022-06-13 14:18 226阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-for指令用法</h1> <hr> <div id="app"> <ul> <li v-for="item in sortItems"> { { item}} </li> </ul> <ul> <li v-for="(student,index) in sortStudent"> { { index}}：{ { student.name}} - { { student.age}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ items:[20,23,18,65,32,19,5,56,41], students:[ {name:'张三',age:32}, {name:'李四',age:30}, {name:'王五',age:21}, {name:'赵六',age:45} ] }, computed:{ sortItems:function(){ return this.items.sort(sortNumber); }, sortStudent: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> </html>

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220613/4a40a2dc942a40cfafceb9091707c751.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---内置指令、自定义指令（详细）、全局指令与局部指令

目录一、v-on 二、v-bind、v-model 三、v-if、v-else、v-show、v-for 四、v-text、v-big 五、v-html 六、v-

一时失言乱红尘/ 2024年04月07日 12:56/ 0 赞/ 51 阅读

相关指令系统——指令寻址

文章目录指令寻址顺序寻址跳跃寻址 O(∩\_∩)O哈哈~ 小结首先，我们还得先回忆一下计算机

拼搏现实的明天。/ 2023年01月21日 06:26/ 0 赞/ 175 阅读

相关指令系统——指令格式

文章目录现代计算机的结构指令格式指令的定义指令格式零地址指令一地址指令

古城微笑少年丶/ 2023年01月21日 04:27/ 0 赞/ 3 阅读

相关 Linux--指令的使用(1)--基础指令--文件指令--打包压缩指令

Linux指令(1) 基础指令在linux中有一个具体操作的格式: ![在这里插入图片描述][20210204223156771.png] (1) ls

水深无声/ 2022年10月27日 15:58/ 0 赞/ 191 阅读

相关指令

1、条件指令（不同条件显示不同内容） <p ngIf="isShow else imgselect"> test works! </p>

不念不忘少年蓝@/ 2022年10月03日 00:47/ 0 赞/ 139 阅读

相关指令与控制器交互，指令与指令交互

慕课网《AngularJS实战》–指令3笔记，点击打开链接一、不同指令对应不同控制器方法（指令的复用） Directive&Controller.js va

我会带着你远行/ 2022年08月20日 12:24/ 0 赞/ 168 阅读

相关 angular&创建指令&指令对象

创建指令指令也是一种服务，只是这种服务的定义有几个特殊要求：必须使用模块的directive（）方法注册服务对象工厂必须返回一个指令定义的对象

痛定思痛。/ 2022年05月24日 09:50/ 0 赞/ 172 阅读

相关汇编指令之移位指令

移位指令包括了算术移位指令、逻辑移位指令、循环移位指令。格式为:xxx oper1,CL/1 ;移位次数只能是1或者存放在CL里面。一

╰半夏微凉°/ 2022年05月24日 02:49/ 0 赞/ 551 阅读

相关 IL指令集——比较指令

Public field Static Ceq 比较两个值。如果这两个值相等，则将整数值 1 (int32) 推送到计算堆栈上；否则，将 0 (int32) 推

向右看齐/ 2022年04月22日 09:43/ 0 赞/ 274 阅读

相关 IL指令集——运算指令

Public field Static Add 将两个值相加并将结果推送到计算堆栈上。 Public field Static Add\_Ovf 将

矫情吗；*/ 2022年04月22日 09:43/ 0 赞/ 313 阅读