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 ...
随机推荐
- 经常用到的meta标签的整理
1.设置页面关键词<meta name="keywords" content="输入具体的关键词">2.设置页面的描述<meta name=& ...
- MapReduce(2): How does Mapper work
In the previous post, we've illustrated how Hadoop MapReduce prepares input for Mappers. Long story ...
- 使用TensorFlow的基本步骤
学习任务 学习使用TensorFlow,并以california的1990年的人口普查中的城市街区的房屋价值中位数作为预测目标,使用均方根误差(RMSE)评估模型的准确率,并通过调整超参数提高模型的准 ...
- vuex基本使用
1.组件之间共享数据的方式 父向子传值:v-bind 属性绑定 子向父传值:v-on 事件绑定 兄弟组件之间共享数据:EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 2. ...
- 高级ACL访问控制列表
实验拓扑: 配置: 基本配置做完之后搭建OSPF网络 R1: ospf 1 area 0 network 10.0.13.0 0.0.0.255 network 1.1.1.1 0.0.0.0 R2: ...
- 《JAVA设计模式》之访问者模式(Visitor)
在阎宏博士的<JAVA与模式>一书中开头是这样描述访问者(Visitor)模式的: 访问者模式是对象的行为模式.访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要 ...
- Java数组模拟栈
一.概述 注意:模拟战还可以用链表 二.代码 public class ArrayStack { @Test public void test() { Stack s = new Stack(5); ...
- LeetCode #807. Max Increase to Keep City Skyline 保持城市天际线
https://leetcode-cn.com/problems/max-increase-to-keep-city-skyline/ 执行用时 : 3 ms, 在Max Increase to Ke ...
- hdu3664 Permutation Counting（dp）
hdu3664 Permutation Counting 题目传送门 题意: 在一个序列中,如果有k个数满足a[i]>i:那么这个序列的E值为k,问你 在n的全排列中,有多少个排列是恰好是E值为 ...
- UI库colorui的使用————小程序
UI库colorui的使用----小程序 把colorui文件放到你的小程序中 包含文件: icon.wxss+main.wxss+components(文件夹里有icon和一些组件)+animati ...