第十篇: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 ...
随机推荐
- Bika LIMS 开源LIMS集——实验室检验流程概述及主页、面板
主页 主页左侧为功能入口菜单.右侧含待办提醒,中间为工作区. 工作区功能将主要工作页面置于首页,便于用户操作. Dashboard 面板 系统面板 包括待排定的实验任务.实验中的任务数.复核/审核中的 ...
- C++对象间通信组件，让C++对象“无障碍交流”
介绍 这是很久之前的一个项目了,最近刚好有些时间,就来总结一下吧! 推荐初步熟悉项目后阅读本文: https://gitee.com/smalldyy/easy-msg-cpp 从何而来 这要从我从事 ...
- python爬虫之protobuf协议介绍
前言 在你学习爬虫的知识过程中是否遇到下面的类型.如果有兴趣学习一下或者了解相关知识的,且不嫌在下才疏学浅,可以参考一下.欢迎各位网友的指正. 首先叙述一下问题的会出现的式样. 你可能会在请求参数中看 ...
- jfinal中如何使用过滤器监控Druid监听SQL执行？
摘要:最开始我想做的是通过拦截器拦截SQL执行,但是经过测试发现,过滤器至少可以监听每一个SQL的执行与返回结果.因此,将这一次探索过程记录下来. 本文分享自华为云社区<jfinal中使用过滤器 ...
- 面向对象的封装（粘贴Markdown代码解决缩进问题）
直接粘贴idea的代码会导致缩进错乱,建议先粘贴到记事本再粘贴到笔记!!! 1.先将属性私有化,再对外提供简单的接口可以访问内部.如set.get方法 2.set方法:修改年龄 public void ...
- 关于Thymeleaf无法取值问题
SpringBoot2.7以前的版本在获取model中数据的时候不需要注释,2.7以后的版本需要加注释,它无法直接取存在model中的数据,不加注释的时候会爆红但是可以正常使用,这个注释的含义就是指定 ...
- Windows 远程连接后，自动断开，所有程序都自动关闭（待验证，待更新）
win+r输入regedit打开注册表编辑SecurityLayer,将值改为2 计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Ter ...
- 无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- Python学习——实现文件交互的学生管理系统
第一次用写博客,从前一直在博客园上学习,现在也来这里分享一下我的学习成果. 就开门见山的说吧.首先做了一个流程图,可能也不符合啥规范,就当草稿用,将就着看,明白个设计思路就行. 1.首先系统初始化,定 ...
- hive常用函数 wordCount--Hive窗口函数1.1.1 聚合开窗函数聚合开窗函数实战
第三天笔记 第三天笔记 SQL练习Hive 常用函数关系运算数值计算条件函数日期函数重点!!!字符串函数Hive 中的wordCount1.1 Hive窗口函数1.1.1 聚合开窗函数聚合开窗函数实战 ...