第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句
<div id="app">
<ol>
<li v-for="site in sites"> /*for的特殊格式,site in sites,嗯我把他理解为数据在数据组里,然后循环*/
{{ site.name }} /*试了下,<template>,<li>,<p>里面都是可以用v-for, <li>能够加上序号在进行输出,*/
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' }, /*将sites中的name数据一项一项打出来.*/
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
v-for 迭代对象
我要先理解一下迭代是什么:迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。
emmmmmm,迭代，是通过无数次，不断的，重复的，接近一个目标，折返接近，再折返再接近，最终达到目标。它不是一次性完成的，是通过不断重复的，但每次重复又比之前更好一点，这样一种非线性的进程.
(还没有完全理解,等我再理解两天)
上代码:
<div id="app">
<ul>
<li v-for="value in object"> /*object中的定值*/
{{ value }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
甚至还可以双参数,三参数
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }} /*三参数对应:index指数,key标签,value定值*/
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
第十篇:vue.js for循环语句(大作业进行时)的更多相关文章
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- Vue.js：循环语句
ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...
- 第六篇:vue.js模板语法(,属性,指令,参数)
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...
- #9.5课堂JS总结#循环语句、函数
一.循环语句 1.for循环 下面是 for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块) ...
- Go语言【第六篇】：Go循环语句
Go语言循环语句 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句,以下为大多数编程语言循环程序的流程如: Go语言提供了以下几种类型循环处理语句: 循环类型 描述 fo ...
- Verilog学习笔记基本语法篇（六）········ 循环语句
在Verilog中存在着4种类型的循环语句,用来控制执行语句的执行次数. 1)forever语句: 连续执行的语句. 2)repeat语句: 连续执行n次的语句. 3)while语句: 执行语 ...
- 1.3if判断语句+while和for循环语句+购物车作业
1.if 语句 if userame=_usename and password=_password: print("welcome user {name} login..."). ...
- vue.js 中slot 用处大（转载）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- js之循环语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 根据数据中的key获取value值
一.测试数据准备 List<Map<String, String>> result = new ArrayList();Map<String, String> ma ...
- 关于个人全栈项目【臻美Chat】遇到的BUG以及解决方法
项目展示: 问题总结:一.单用户重复登录设备 将每次输入的用户名与已经记录在后台的数组ar比较,如果存在则表示重复. // 生成数组var ar="";socket.on('arr ...
- leetcode二叉树题目总结
leetcode二叉树题目总结 题目链接:https://leetcode-cn.com/leetbook/detail/data-structure-binary-tree/ 前序遍历(NLR) p ...
- c# 把网络图片http://....png 打包成zip文件
思路: 1.把网络图片下载到服务器本地. 2.读取服务器图片的文件流 3.使用zip帮助类,把图片文件流写进zip文件流. 4.如果是文件服务器,把zip文件流 推送文件服务器,生成zip的下载url ...
- Docker — 从入门到实践PDF下载（可复制版）
0.9-rc2(2017-12-09)修订说明:本书内容将基于DockerCEv17.MM进行重新修订,计划2017年底发布0.9.0版本.旧版本(Docker1.13-)内容,请阅读docker-l ...
- APISpace 让你快速获取名言警句
名言警句,是指一些名人说的.写的.历史纪录的.经过实践所得出的结论或建议.警示的比较有名的言语.名言警句易于留传. 名言警句API,涵盖人生.励志等多个方面. APISpace 有很多免费通用 ...
- 2022-7-15 java 数据结构入门
@ 目录 数据结构 1.二分查找 动图演示: 2.冒泡排序 1.冒泡排序原理 2.冒泡排序基础版 3.冒泡排序代码优化版 4.冒泡排序代码升级版 3.选择排序 1. 算法步骤 2.插入排序图解: 3. ...
- 2022.7.9 单向链表&数组优化
相比起数组,链表解决了数组不方便移动,插入,删除元素的弊端,但相应的,链表付出了更加大的内存牺牲换来的这些功能的实现. 链表概述 包含单链表,双链表,循环单链表,实际应用中的功能不同,但实现方式都差不 ...
- 基于OpenCV实现对图片及视频中感兴趣区域颜色识别
基于OpenCV实现图片及视频中选定区域颜色识别 近期,需要实现检测摄像头中指定坐标区域内的主体颜色,通过查阅大量相关的内容,最终实现代码及效果如下,具体的实现步骤在代码中都详细注释,代码还可以进一步 ...
- java的访问权限protected和default
protected和default的区别 第一点:在同一个包中,protected和default表现一致,即,当main方法所在的类和使用了protected与default修饰属性.方法的类在同一 ...