html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<!-- v-for可以将一组数组渲染到列表当中 -->
<!-- 以item in items的形式 其中 items是源数据 item是他的别名 -->
<ul id="app-1">
<li v-for="item in items">
<!-- 注意：这里的item和message定义要前后一致 -->
{{item.message}}
</li>
</ul>
<!-- 在v-for模块中我们有对父作用域的完全访问权限 其中还可以增加一个参数 索引index -->
<ul id="app-2">
<!-- v-for使用在li中 -->
<li v-for="(item2,index) in items2">
{{parentMessage}}-{{index}}-{{item2.message2}}
</li>
</ul>
<!-- 注意：还可以用of 代替 in -->
<!-- 如同v-if v-for也可以与template一起使用来渲染多个元素块 -->
<ul id="app-3">
<template v-for="item3 of items3">
<!-- 标签中{{}}不能忘记！！！ -->
<li>{{item3.message3}}</li>
<li v-bind:class="{active: isActive}"></li>
</template>
</ul>

<!-- v-for还可以与对象的属性连用 -->
<ul id="app-4">
<li v-for="value in object">
{{value}}
</li>
</ul>
<!-- 还可以添加键名参数 -->
<ul id="app-5">
<li v-for="(value , key) in object2">
{{ key }} : {{ value }}
</li>
</ul>
<!-- 还可以添加index -->
<ul id="app-6">
<li v-for="(value , key ,index) in object3">
{{ key }} : {{ value }} : {{ index }}
</li>
</ul>

<!-- v-for还可以用于整数 -->
<div id="app-7">
<!-- 注意：只写这些代码是运行不了的 还要进行new Vue -->
<span v-for="n in 10">{{ n }}</span>
</div>

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

js:

var app=new Vue({
el:'#app-1',
data:{
items:[
{message:'我是列表1'},
{message:'我是列表2'}
]
}
});
var app2 = new Vue({
el: '#app-2',
data: {
parentMessage: 'Parent',
items2: [
{ message2: 'Foo' },
{ message2: 'Bar' }
]
}
});
var app4=new Vue({
el:'#app-4',
data:{
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
object2:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app6=new Vue({
el:'#app-6',
data:{
object3:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app7=new Vue({
el:'#app-7',
});

未完...

关于vue.js中列表渲染练习的更多相关文章

  1. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  2. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  3. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  4. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  5. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  6. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  7. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  8. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  9. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

随机推荐

  1. Jackson ObjectMapper类使用解析

    /** * Jackson ObjectMapper类 */ //ObjectMapper类是Jackson库的主要类.它提供一些功能将转换成Java对象匹配JSON结构,反之亦然.它使用JsonPa ...

  2. ByteArrayBuilder

    public class ByteArrayBuilder : IDisposable { #region Constants /// <summary> /// True in a by ...

  3. 与焊接厂交流——从生产角度出发的PCB设计心得

    上周的时候,去了趟加工厂盯电路板的焊接进度.然后在闲余的时候,跟焊接厂的工程师交流了一下,工程师从生产的角度,说了几个值得注意的事项: 1.元件的焊盘应该要窄长,不能过宽.因为,在过机表贴时,焊盘上的 ...

  4. 帝国cms怎么调用栏目的别名呢？

    在世界买家网新模板制作过程中,由于栏目名称比较长,用在标题上没有问题,对seo有利,但是在页面上不希望这么长,简单即可,提过提供了栏目别名,如果能调用就方便了, 请留意下面的修改方法 修改后栏目别名使 ...

  5. Windows进程崩溃问题定位方法

    Linux上进程崩溃通常会生成core文件,用gdb打开后执行bt命令即可查看堆栈.而在Windows平台上,我们通常会采用MiniDumpWriteDump来进行堆栈转储,而这需要对系统Api有一定 ...

  6. 麦咖啡阻挡正常打开Excel文件

    双击打开Excel文件,提示如下图: Excel文件被麦咖啡做阻挡,无法正常打开 处理方案: 过一会儿还是出现此问题,干脆就把缓冲区保护给禁用掉

  7. 2014年6月份第4周51Aspx源码发布详情

    通用医院会员管理系统源码  2014-6-23 [VS2010]功能介绍:本系统共包括以下模块:会员开卡管理.会员充值管理.会员消费管理.会员病例管理.客户预约管理.系统信息管理(门诊管理.卡类型管理 ...

  8. 为什么匿名内部类参数必须为final类型

    1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量(形式参数或局部变量)是天经地义的.是很自 ...

  9. Android深度探索--HAL与驱动开发----第一章读书笔记

    1. Android的系统架构有四层,它的发展目前来说 是比较成熟的,流行于目前的市场.其架构包括四层(linux内核.C/C++代码库.Android SDK API.应用程序). 2. 驱动是直接 ...

  10. Varnish常用相关命令工具

    varnishd启动./varnishd  -f /usr/local/varnish-3.0.2/etc/varnish/default.vcl -s malloc,1G -T 127.0.0.1: ...