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 ...
随机推荐
- 测开之路八十一：参数定义之*args和**kwargs
# *,不定长参数,*args# 定义函数参数def avg(score, *scores): return (score + sum(scores)) / (len(scores) + 1) ...
- ajax总结及案例
一.实验简介 目的:检验输入登录名在数据库中是否存在,如果存在,当鼠标移出登录名框后,会提示用户名已存在,并且鼠标指针自动回到登录名框内. 操作步骤: 1.获取登录名的值 2.根据获取的登录名,组织查 ...
- Selenium WebDriver UI对象库
UI对象库:使用配置文件存储测试页面上的定位和定位表达式,做到定位数据和程序的分离. 第一步:实现工具类Object工具类,供测试程序调用. /** * 使用配置文件存储测试页面上的定位和定位表达式, ...
- java创建线程的两种方式及源码解析
创建线程的方式有很多种,下面我们就最基本的两种方式进行说明.主要先介绍使用方式,再从源码角度进行解析. 继承Thread类的方式 实现Runnable接口的方式 这两种方式是最基本的创建线程的方式,其 ...
- CSS的置换和非置换元素
一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...
- UML类图及类之间关系
1.UML基本介绍 UML:统一建模语言,是一种用于软件系统分析和设计的语言工具 2.UML图 UML图分类: 用例图 静态结构图:类图,对象图,包图,组件图,部署图 动态行为图:交互图,状态图,活动 ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- 55-python基础-python3-字典-删除键值对-del语句
字典-键值对的彻底删除 对于字典中不再需要的信息,可使用del 语句将相应的键—值对彻底删除. 使用del 语句时,必须指定字典名和要删除的键. 注意 删除的键—值对永远消失了.
- G a+b+c+d=?
G a+b+c+d=? 链接:https://ac.nowcoder.com/acm/contest/338/G来源:牛客网 题目描述 This is a very simple problem! Y ...
- C# lodop 打印控件的使用
原文:https://www.cnblogs.com/izhiniao/p/4160117.html 官网:http://www.mtsoftware.cn/demo.html 先看效果图 : lod ...