循环语句

循环使用 v-for 指令

<div id="app">
<ol> // 有序
<li v-for="item in items">
{{ items.name }}
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
items: [
{},
]
}
})
</script>
<ul>
<template v-for="item in items">
<li>{{item.name}}</li>
</template>
</ul>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: ''
}
}
})
</script>
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>

请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(6)打鸡儿教你Vue.js的更多相关文章

  1. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  4. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  5. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

  10. (12)打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. 原生 js 录屏功能

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. flume-ng version出现错误Error: Could not find or load main class org.apache.flume.tools.GetJavaPrope的解决办法

    错误: 找不到或无法加载主类 org.apache.flume.tools.GetJavaProperty或者Error: Could not find or load main class org. ...

  3. docker registry-v2 搭建私有仓库

    参考官方文档:https://docs.docker.com/registry/deploying/ 参考 :http://www.tuicool.com/articles/6jEJZj 本例子使用两 ...

  4. 在论坛中出现的比较难的sql问题:13(循环替换问题 过滤各种标点符号)

    原文:在论坛中出现的比较难的sql问题:13(循环替换问题 过滤各种标点符号) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路. 去掉一个字段中的标点符号的SQL语句怎么写 ...

  5. interface Part1(接口详解)

    1. 在日常生活中,手机.笔记本电脑.平板电脑等电子产品提供了不同类型的接口用于充电或者连接不同的设备. 不同类型接口的标准不一样,例如电压.尺寸等. 2. 在C#语言中,接口也会定义一种标准,如果需 ...

  6. List<T> or IList<T>

      If you are exposing your class through a library that others will use, you generally want to expos ...

  7. python数据统计出海品牌

    当国内市场处于红海之中时,市场全球化已成为大势所趋.越来越多的国产品牌远走高飞,纷纷将品牌拿出来. 2019年,中国品牌十大品牌中,华为品牌力指数同比增长22%,阿里巴巴品牌力指数增长48%,小米品牌 ...

  8. U盘因格式化 NTFS 中断造成无法识别,生产平台同样无法识别的修复处理方案

    特征: 电脑设备管理器(win10):识别到大容量存储设备 电脑磁盘管理:识别可移动磁盘无媒体 ChipGenius(v4_19_0319):能识别到制造商,但识别不到芯片具体型号 U盘相关生产平台: ...

  9. c# 值传递

  10. IDEA类的旁边有个对勾

    说明该类添加到IDEA的书签栏去了,在IDEA左侧下方有个Favorites选项,在这里的BookMarks中可以看到这个类. 取消方法: 选中这个类,按F11即可取消