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. C/C++程序员常去网站

    www.codeproject.comwww.codegru.comwww.chinaunix.netwww.csdn.netwww.vckbase.com http://www.google.com ...

  2. java语言程序设计(一)-1

    java 语言的特点是: 强类型,制定了比较多的语言规范,尽可能在编译阶段检测出更多的错误及警告. 编译和解释,首先将源代码编译成codebyte,运行时,java的运行系统装载和链接需要执行的类,并 ...

  3. php 文件操作

    $fn="e:\debug.txt"; if(is_writable($fn)==false){ die("不能写入"); } file_put_content ...

  4. HBase的基本架构及其原理介绍

    1.概述:最近,有一些工程师问我有关HBase的基本架构的问题,其实这个问题仅仅说架构是非常简单,但是需要理解.在这里,我觉得可以用HDFS的架构作为借鉴.(其实像Hadoop生态系统中的大部分组建的 ...

  5. 浅谈大数据神器Spark中的RDD

    1.究竟什么是RDD呢? 有人可能会回答是:Resilient Distributed Dataset.没错,的确是如此.但是我们问这个实际上是想知道RDD到底是个什么东西?以及它到底能干嘛?好的,有 ...

  6. 对“Git”认知。

    并没有接触过这个名词,相信在今后的学习和生活中会接触.不过在网上大致看了一下,应该是一种类似于后台控制的系统吧,希望以后自己会了解这个陌生的东西(软件?系统?程序?).

  7. RS232，RS422串口标准小结

    RS232和RS422都是广泛使用的异步串行接口标准.由于它们实现简单且占用IO口资源少,在低速传输下是不错的方案. RS232是单端走线,最高波特率为115200,传输最远距离不超过150米,它的逻 ...

  8. Tabbed Activity的使用（Fragment）

    1,首先file -> new -> Activity -> Tabbed Activity 2,创建完成后,发现会自动的创建一大堆代码,大部分我们是不需要关心的,关于页面切换的代码 ...

  9. sync_with_stdio

    /* The synchronization referred to is @e only that between the standard * C facilities (e.g., stdout ...

  10. mac下安装和配置mysql5.7.9

    我安装的是5.7.9版本的sql 一开始在网上看到的都是其他版本的安装,弄得自己卸载了好几次 mysql就只有一个dmg主文件,安装这一个就好了. 5.7以后安装的mysql不再使用旧版的默认密码:r ...