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. wpf初步-grid布局-连连看棋盘

    private void Window_Loaded_1(object sender, RoutedEventArgs e) { //Button btn1 = new Button(); //btn ...

  2. truncate,delete,drop的异同点

    说明:本文摘自oracle技术用户讨论组 truncate,delete,drop的异同点  注意:这里说的delete是指不带where子句的delete语句    相同点:truncate和不带w ...

  3. Matlab_Graphics(1)_2D

    1.Add title ,axis Lables, and Legend to Graph: x=linspace(-*pi,2pi,); y1=sin(x); y2=cos(x); figure p ...

  4. JavaScript判断数据类型

    JavaScript中判断数据类型的方式有三种: 1.typeof typeof 1;   //"number" typeof "abc";  //" ...

  5. ADO.NET与ORM的比较:NHibernate实现CRUD(转)

    原文地址 http://blog.csdn.net/zhoufoxcn/article/details/5402511 说明:个人感觉在Java领域大型开发都离不了ORM的身影,所谓的SSH就是Spr ...

  6. Android基本布局

    android基本布局有三种:LinearLayout,RelativeLayout,FrameLayout. 一.LinearLayout 1,这是一种垂直布局(或者水平布局),可以通过下面这一句来 ...

  7. c# 水晶报表的设计（非常的基础）

    最近在公司实习,由于公司需要用到的一种叫做水晶报表的神奇的东东,老大就叫我们学习学习.怕自己以后忘了,也为了以后阅读方便,将其记录下来. 使用工具:vs2008 基本方法一.使用水晶报表的推模式 步骤 ...

  8. Linux系统性能分析

    http://c.biancheng.net/cpp/html/2782.htmlLinux系统性能分析 这篇教程的目的是向大家介绍一些免费的系统性能分析工具(命令),使用这些工具可以监控系统资源使用 ...

  9. html+css知识点总结（田彦霞）

    html部分 html头部声明 DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本.DOCTYPE声明必须放在每一个XHTML文档最顶部,在所 ...

  10. install sun java in ubuntu

    1. 下载: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 2. 解压安装: ...