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. Data Binding和INotifyPropertyChanged是如何协调工作的？

    前言 WPF的一大基础就是Data Binding.在基于MVVM架构的基础上,只有通过实现INotifyPropertyChanged接口的ViewModel才能够用于Data Binding. 要 ...

  2. MVC教程相关

    本教程所有文章导航 本系列共10篇文章,翻译自Asp.Net MVC4 官方教程,由于本系列文章言简意赅,篇幅适中,从一个示例开始讲解,全文最终完成了一个管理影片的小系统,非常适合新手入门Asp.Ne ...

  3. MySQL 配置文件中忘配置default-character-set引发的乱码问题

    今天,一开发同事使用jdbc连接数据库执行一条语句无结果集,但是通过sqlyou执行相同的语句有返回结果. 执行的语句where条件中含有中文,这应该是字符集引起的 此开发测试实例刚迁移不久的,查看迁 ...

  4. JSP数据交互（二）和Servlet基础

    01.Application原理与应用 01.application对象的作用域范围是整个应用服务,而它在应用中所承担的责任就类似于一个全局变量.只要服务启动,则application对象就会存在. ...

  5. How to upgrade Subversion on OSX

    How to upgrade Subversion on OSX http://andowebsit.es/blog/noteslog.com/post/how-to-upgrade-subversi ...

  6. docker 源码分析 六（基于1.8.2版本），Docker run启动过程

    上一篇大致了解了docker 容器的创建过程,其实主要还是从文件系统的视角分析了创建一个容器时需要得建立 RootFS,建立volumes等步骤:本章来分析一下建立好一个容器后,将这个容器运行起来的过 ...

  7. Java并发编程学习笔记（二）——对象的共享

    主要概念:可见性.重排序.失效数据.最低安全性.发布.逸出.线程封闭(Ad-hoc.栈封闭.ThreadLocal类).不变性.Final域.事实不可变对象. 1.在没有同步的情况下,编译器.处理器以 ...

  8. 如何在Form++开源组态平台添加硬件采集接口

    E-Form++是一套值得推荐的高品质开源C++矢量图形库,C++编程之所以异常困难,主要就是没有很专业的C++基础架构库有关.E-Form++的出现一定程度上填补了这个空白.是开发工控.监控.建模与 ...

  9. Git 的深入理解与GitHub托管服务（转）

    源代码管理系统(SCM)与版本控制   版本控制是一种记录若干文件内容变化,以便将来查阅特定版本修订情况的系统.   本地版本控制系统   许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会 ...

  10. Direct3D 10学习笔记（一）——初始化

    本篇将简单整理Direct3D 10的初始化,具体内容参照< Introduction to 3D Game Programming with DirectX 10>(中文版有汤毅翻译的电 ...