第二章 Vue快速入门-- 17 v-for指令的四种使用方式
1.v-for循环普通数组
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<!-- <p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p> --> <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{item}}</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6]
},
methods:{}
});
</script>
</body>
</html>
2.v-for循环对象数组
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<p v-for="(user,i) in list">Id：{{user.id}}---名字：{{user.name}}---索引：{{i}}</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'}
]
},
methods:{}
});
</script>
</body>
</html>
3.v-for循环对象
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<!--注意：在遍历对象身上的键值对的时候，除了有val key ，在第三个位置还有一个索引-->
<p v-for="(val,key,i) in user">值是：{{val}}---键是：{{key}}---索引{{i}}</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
user:{
id:1,
name:'安迪',
gender:'男'
}
},
methods:{}
});
</script>
</body>
</html>
4.v-for迭代数字
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<!-- in后面我们放过普通数组，对象数组，对象，还可以放数字 -->
<!-- 注意：如果使用v-for迭代数字的话，前面的count值从1开始 -->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{}
});
</script>
</body>
</html>
第二章 Vue快速入门-- 17 v-for指令的四种使用方式的更多相关文章
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- Window Position
IE, Safari, Opera, and Chrome all provide screenLeft and screenTop properties that indicate the wind ...
- JavaScript（1）——编程真善美
编程真善美 命名风格: 驼峰命名法 小驼峰法 变量一般用小驼峰法标识.驼峰法的意思是:除第一个单词之外,其他单词首字母大写:camelCase 大驼峰法(即帕斯卡命名法) 相比小驼峰法,大驼峰法把第一 ...
- 【AMAD】betamax -- 一个ruby-VCR的模仿品，只支持requests
简介 动机 作用 用法 个人评分 简介 betamax1会记录你的HTTP操作,可以让你在测试的时候不必重复进行真实的请求. 动机 如果你的代码需要和外部资源一起运作,那么测试这段代码的方法就叫做集成 ...
- Django的一些注意事项
不要使用 Python 或 Django 的组件名命名项目.具体而言,不要使用“django”(与 Django 冲 突)或“test”(与 Python 内置的一个包冲突)这样的名称. 在中文版中, ...
- webdriervAPI(多窗口切换)
两个方法 driver.current_window_handle 获取当前窗口句柄 driver.window_handles 获取所有窗口句柄 from selenium import webdr ...
- base64图片数据类型转numpy的ndarray矩阵类型数据
1.两种方法如下链接 https://www.cnblogs.com/mtcnn/p/9411683.html 2.第一种方法: # coding: utf-8 # python base64 编解码 ...
- sqlalchemy的join使用
——.先看mysql的join链接方法 #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Floa ...
- Tableau常用函数、功能
Tableau常用函数 创建计算字段: Tableau常用功能
- HDU 2044 DP (fibonacci)
HDU 2044 https://vjudge.net/problem/HDU-2044 每一个只有可能由它左面的以及左上的状态变过来,也就是F(i-1)和F(i-2) F(1) = 1 F(2) = ...
- [BZOJ 3117] [NOI1999]内存分配(STL)
[BZOJ 3117] [NOI1999]内存分配(STL) 题面 内存是计算机重要的资源之一,程序运行的过程中必须对内存进行分配. 经典的内存分配过程是这样进行的: 1.内存以内存单元为基本单位,每 ...