vue.js循环语句
vue.js循环语句
- 循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组, site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js循环语句</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{site.name}}
</li>
</ol>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
sites: [
{name: 'Baidu'},
{name: 'Google'},
{name: 'Taobao'}
]
}
})
</script>
</html>
- 模板中使用 v-for：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js循环语句</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<template>
<li v-for="site in sites">
{{site.name}}
</li>
</template>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
sites: [
{name: 'Baidu'},
{name: 'Google'},
{name: 'Taobao'}
]
}
})
</script>
</html>
v-for迭代对象
- v-for可以通过一个对象的属性来迭代数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loop object of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="value in Object">
{{value}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
Object: {
name:'baidu',
url: 'www.baidu.com',
slogan: '搜素引擎'
}
}
})
</script>
</body>
</html>
- 也可以提供第二个的参数为键名：
<div id="app">
<div v-for="(value, key) in Object">
{{key}} : {{value}}
</div>
</div>
- 也可以提供第三个参数为索引：
<li v-for="(value, key, index) in Object">
{{ index }}. {{ key }} : {{ value }}
</li>
v-for 迭代整数
- v-for 也可以循环整数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loop object of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>vue.js循环语句的更多相关文章
- Vue.js 循环语句
循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. v-for 指令: v-for 可以 ...
- Vue.js——循环（Java、JSTL标签库、数据库）
一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...
- vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- js循环语句
1.for循环 for(语句1:语句2:语句3){ 代码块 } //语句1:初始化表达式; //语句2:条件表达式; //语句3:更新表达式; 2.for-in循环 for(x in object){ ...
- JS循环语句的理解
循环语句就是让程序重复性去做某些工作 最常见的就是for循环 那它的写法都有哪些呢? 1.必须要有初始值 2.要有条件判断 3.状态的改变 4.循环体 一定要控制循环多少次结束,否则就变成了死循环,消 ...
- Vue(三)--循环语句
v-for: v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. demo1. <!DOCTYPE html&g ...
- JS循环语句！
<1> for(1.初始值(初始值只有一次):2.判断条件:4.状态改变){ 3.执行语句: //如果判断条件为true,则进入死循环:不设执行语句浏览器会未响应: } <2> ...
- js循环语句while，do..while，for
1. while循环 while(循环条件){ 循环体语句块; } 2.do..while循环 do{ 循环体语句块; }while(循环条件) 两者区别:while先判断后执行.循环体语句可能一次都 ...
- JS循环语句作业讲解（折纸、兔子生兔子、买东西组合）
1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米: varn = 0;varg = 0.0001;while(){ g= g *2; n++ (g>8848bre ...
随机推荐
- PHP安装-centos7
下载地址:https://www.php.net/downloads.php 1.wget下载php源码至/usr/local/src 下 wget https://www.php.net/distr ...
- Linux 文件和目录的权限设置 - umask（默认权限），chmod（改变权限）
1. chmod 改变已有目录或文件的权限 chmod 设置已有目录或文件的权限.可以为指定范围的用户添加或删除权限. 权限范围的表示法如下: u:User,即文件或目录的拥有者: g:Group,即 ...
- socketpair
与pipe的区别 pipe产生的文件描述符是半双工的,需要pipe两次才能实现全双工,产生的两个描述符是一个读,一个写 socketpair直接就可以全双工,产生的两个文件描述符的任何一个都可读可写 ...
- Maven系列学习(一)Maven基本知识
Maven 简介 1.Maven主要是基于Java平台的项目构建,依赖管理和项目信息 2.Maven是优秀的构建工具,跨平台,消除构建的重复,抽象了一个完整的构建生命周期模型,标准化构建过程 3.管理 ...
- Oracle基本操作练习（一）
--创建表空间 create tablespace test datafile 'c:\test.dbf' size 100m autoextend on next 10m; --删除表空间 drop ...
- 11 (H5*) js第1天 基本数据类型、变量
目录 1: js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...
- pipenv虚拟环境
虚拟环境 之前用的 virtualenv +virtualenvwrapper 今天在学习 flask 框架 用到了pipenv pipenv Pipfile 文件是 TOML 格式而不是 ...
- java_第一年_JavaWeb（5）
HttpServletRequest对象 通过HttpServletRequest对象可获取客户端在访问服务器时,请求的所有信息 获取客户机的信息 getRequestURL:返回客户端发出请求时的完 ...
- python学习第二十天文件操作方法
字符有的存储在内存,有的存储在硬盘,文件也有增删改查的操作方法,open()方法,read()方法,readline()方法,close()文件关闭,write()写的方法,seek() 指针移动方法 ...
- A Bug’s Life POJ - 2492（种类并查集）
题目链接 每次给出两个昆虫的关系(异性关系),然后发现这些条件中是否有悖论 就比如说第一组数据 1 2 2 3 1 3 1和2是异性,2和3是异性,然后说1和3是异性就显然不对了. 我们同样可以思考一 ...