v-for 指令:解决模板循环问题

v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>v-for 实例</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>
    <hr>
    <ul>
        <li v-for="(student,index) in sortStudents">
            {{index+1}}:{{student.name}}-{{student.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:‘#app‘,
        data:{
            items:[53,23,7,14,54,36,28],
            students:[
                {name:‘Xurui‘,age:22},
                {name:‘Xu‘,age:1},
                {name:‘rui‘,age:18},
                {name:‘yaya‘,age:6},
            ]
        },
        computed:{
            sortItems: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>
</html>

  

时间: 2024-10-14 15:34:13

v-for 指令:解决模板循环问题的相关文章

百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目. 事件添加和移除 我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听

Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题

转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: 1 2 3 4 5 6 7 8 9 10 11 12 create or replace procedure getidlist is   l_idlist varchar2(200); begin   l_idlist:='1,2,3,4';   for brrs in (select * fro

在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常的解决办法

问题现象: 在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常. 解决办法: 1.定位到报错的方法为WWXML.java文件中的createDocumentBuilder方法: pub

AngularJS--自定义指令和模板

一.自定义指令: 1. 先创建模块    var app=angular.module("myApp",[]); 2. 创建自定义指令 (directive后面的参数一:自定义指令的名称,参数二:function 返回值是一个对象 template是模板) app.directive("shen",function(){ return { template:"<h1>这是自定义属性</h1>" } }) 3.划定模块范围,

vue的指令与模板

一.指令---是一种特殊的自定义间属性 指令的职责就是当表达式的值改变时,相应的将某些行为应用到DOM上,在Vue中,指令以v-开头 helloworld例子:数据绑定,点击后弹出提示框 1 <!--模板--> 2 <div id="demo"> 3 <span v-on:click="clickHandle">{{message}} </span> 4 </div> 5 6 <script type

angularJS 使用自定义指令输出模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-init=

解决前端循环报错的情况

<div class="tab"> <ul class="tab-menuWrapper" id="tab-menuWrapper"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> <div class="tab-c

angularjs学习之四(解决模板视图和angularjs之间的冲突 )

问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: //这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); //这里是对应的视图 <div ng-controller="loadData"> <ul> <!--1. 初始化的时候我们需要使用下面这句--> &l

利用闭包解决for循环里onclick事件不能捕捉实时i值问题

问题描述 我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题,当我们触发这个事件的时候,我们能获取的i值是for完整执行完后i的值,而不能获取到代码顺序里i的值 首先看一段代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title