使用v-for指令渲染列表
v-for：对集合或对象进行遍历；
使用v-for对数组遍历时：
效果如下：
代码：
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
arr:[11,22,33,44,55,66,77] } })
}
</script> <body>
<div id="two">
<ul> <li v-for="value in arr">{{value}}</li>
</ul> </div>
</body>
使用v-for遍历一个对象时：
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{ user:{
id:'01',
name:'bob'
}
}
})
} </script>
html:
<div id="two">
<ul> <li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>
</ul> </div>
使用v-for遍历多个对象的时：
在vue中加入多个对象：
users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}]
html:使用v-for进行遍历：
<li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>
使用v-for进行遍历数组、单个对象以及多个对象总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
// arr:[11,22,33,44,55,66,77],
// user:{
// id:'01',
// name:'bob'
// }
users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}] }
})
} </script> <body>
<div id="two">
<ul> <!--<li v-for="value in arr">{{value}}</li>-->
<!--<li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>--> <li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>
</ul> </div>
</body>
</html>
进行遍历数组，单个对象以及多个对象的代码.html
使用v-for指令渲染列表的更多相关文章
- vue入门：（v-for指令与列表渲染）
v-for渲染列表 维护状态 数组变异方法与替换数组 $set.$remove 对象属性实现列表渲染 一.v-for渲染列表 语法:v-for="item in items" 先来 ...
- 前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- vue v-nav指令属性列表
v-nav指令属性列表 属性名 属性描述 类型 必选 默认 title 导航栏标题 String No 空字符串 showBackButton 是否显示(左边的)返回按钮 Boolean No fal ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
- vue2——指令渲染，{{}}渲染
博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能
1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块 修改了start 脚本 nodemo ...
随机推荐
- 【LeetCode每天一题】Search in Rotated Sorted Array（在旋转数组中搜索）
Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand.(i.e., ...
- jenkins 邮箱配置---腾讯企业邮箱
一,简单设置 1.登陆jenkins--> 系统管理 ---> 系统设置 2.邮箱就是发送者的邮箱,密码是登陆邮箱的密码 3.设置完以后,可以点击‘test configuration’, ...
- [LeetCode] 859. Buddy Strings_Easy
Given two strings A and B of lowercase letters, return true if and only if we can swap two letters i ...
- [Java in NetBeans] Lesson 04. Class / Objects
这个课程的参考视频和图片来自youtube. 主要学到的知识点有: Class: Blueprint for an object. (e.g. dog is a class) Object: cust ...
- nodejs+mysql入门实例（表的查询）
//连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: '******', //数据 ...
- bootstrap评分插件 Bootstrap Star Rating Examples
http://www.jq22.com/demo/bootstrap-star-rating-master201708041812/
- webpack使用七
产品阶段的构建 目前为止,我们已经使用webpack构建了一个完整的开发环境.但是在产品阶段,可能还需要对打包的文件进行额外的处理,比如说优化,压缩,缓存以及分离CSS和JS. 对于复杂的项目来说,需 ...
- Spring.之.jar包官网下载
jar包官网下载 1. 官网下载网址:http://repo.spring.io/libs-release 2. 用到的jar包所在路径:org/springframework/spring/ ,在此 ...
- 如何遍历tabcontrol控件的所有的tabpage中的所有控件
foreach(Control c in tabControl1.TabPages)这个循环的意思是说,遍历tabControl1中所有的TabPages,TabPages是包含在tabControl ...
- JS实例4
根据当前年的前五年后五年的年月日 <select id="nian" onclick="Bian()"></select>年 <s ...