第十篇: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 ...
随机推荐
- windows系统下.NET CORE c# 通过bat脚本发布iis应用程序，半智能点击式ci/cd
这里以git为例子讲解: 第一个 pullCode.bat 文件是 拉取代码 git pull 第二个 publish.bat 脚本,编译代码,并发布指定文件夹 dotnet publish &quo ...
- 神经网络可视化《Grad-CAM:Visual Explanations from Deep Networks via Gradient-based Localization》
神经网络已经在很多场景下表现出了很好的识别能力,但是缺乏解释性一直所为人诟病.<Grad-CAM:Visual Explanations from Deep Networks via Gradi ...
- PTA(BasicLevel)-1031 查验身份证
一.问题定义 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下:首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,1 ...
- 提名 Apache ShardingSphere Committer，说说方法
文章首发在公众号(龙台的技术笔记),之后同步到博客园和个人网站:xiaomage.info 就在前几天,收到了 Apache ShardingSphere Vote 我成为 Committer 的邮件 ...
- Spring知识点详解
1.Spring 概述 1.1.Spring 的概念和特点 Spring 是一个轻量级的控制反转(IoC)和面向切面(AOP)的开源容器框架,它是由 Rod Johnson(音乐学博士)所创建,其核心 ...
- VS Code + GitHub
来到博客园学着别人美化了一下自己的博客页面,蛮好看的,然后右上角有一个"Fork me on GitHub".之前就因为好奇而注册过GitHub,但一直不会使,现在正式开始编程学习 ...
- 基于gRPC编写golang简单C2远控
概述 构建一个简单的远控木马需要编写三个独立的部分:植入程序.服务端程序和管理程序. 植入程序是运行在目标机器上的远控木马的一部分.植入程序会定期轮询服务器以查找新的命令,然后将命令输出发回给服务器. ...
- YII http缓存
http禁止缓存原理 header('Expires: 0'); header('Last-Modified: '. gmdate('D, d M Y H:i:s') . ' GMT'); heade ...
- 珠联壁合地设天造|M1 Mac os(Apple Silicon)基于vscode(arm64)配置搭建Java开发环境(集成web框架Springboot)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_194 也许有人从未听说过Python,但是不会有人没听说过Java,它作为一个拥有悠久历史的老牌编程语言,常年雄踞TIOBE编程语 ...
- CSS3 基础学习
CSS基础学习 当前进度[P78] 参考资料 视频链接:https://www.bilibili.com/video/BV14J4114768 菜鸟教程:https://www.runoob.com/ ...