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. ios中文转码的一个奇葩问题

    事情是这样的:我要在一个URL中截取一个名为‘vfname’的参数,因为这个参数的值带有中文(转码之前的形式),所以我必须将其转码. URL是这样的: http://devapi.amibaguanl ...

  2. C++初始化列表

    C++初始化列表 定义一个类对象时,常常使用初始化列表实例化一个对象,在进入构造函数函数体之前对成员变量完成初始化操作.普通成员变量既可以在初始化中初始化,也可以在函数体重赋值:const成员变量只能 ...

  3. js操作dom---创建一个域来输出调试信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. the king of fighter

    wim 学习部分摘自coolshell http://coolshell.cn/articles/5426.html 基本式 i → Insert 模式,按 ESC 回到 Normal 模式. x → ...

  5. Mybatis 源码分析--Configuration.xml配置文件加载到内存

    (补充知识点: 1 byte(字节)=8 bit(位) 通常一个标准英文字母占一个字节位置,一个标准汉字占两个字节位置:字符的例子有:字母.数字系统或标点符号) 1.创建SqlSessionFacto ...

  6. WebDriver 常见Exception处理

    1. org.openqa.selenium.WebDriverException: unknown error: unhandled inspector error: {"code&quo ...

  7. 一个Ubuntu源更新错误及解决办法

    InRelease: Clearsigned file isn't valid, got 'NODATA' (does the network require authentication?) 尝试进 ...

  8. linux装JDK

    一.安装sun java升 级到ubuntu 11.10之后.ubuntu 默认自带的是openjdkjava.默认情况这个是能够使用的,但是如果你想搭建专业的开发环境,还是需要使用sun的靠谱.另外 ...

  9. Bzoj索引

    1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...

  10. css 绘制对话框三角符号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...