循环语句

循环使用 v-for 指令

  1. <div id="app">
  2. <ol> // 有序
  3. <li v-for="item in items">
  4. {{ items.name }}
  5. </li>
  6. </ol>
  7. </div>
  8. <script>
  9. new Vue({
  10. el: '#app',
  11. data: {
  12. items: [
  13. {},
  14. ]
  15. }
  16. })
  17. </script>
  1. <ul>
  2. <template v-for="item in items">
  3. <li>{{item.name}}</li>
  4. </template>
  5. </ul>
  1. <div id="app">
  2. <ul>
  3. <li v-for="value in object">
  4. {{ value }}
  5. </li>
  6. </ul>
  7. </div>
  1. <script>
  2. new Vue({
  3. el: '#app',
  4. data: {
  5. object: {
  6. name: ''
  7. }
  8. }
  9. })
  10. </script>
  1. <div id="app">
  2. <ul>
  3. <li v-for="(value, key) in object">
  4. {{ key }} : {{ value }}
  5. </li>
  6. </ul>
  7. </div>
  1. <div id="app">
  2. <ul>
  3. <li v-for="(value, key, index) in object">
  4. {{ index }}. {{ key }} : {{ value }}
  5. </li>
  6. </ul>
  7. </div>
  1. <div id="app">
  2. <ul>
  3. <li v-for="n in 10">
  4. {{ n }}
  5. </li>
  6. </ul>
  7. </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. Springboot模板(thymeleaf、freemarker模板)

    目的: 1.thymeleaf模板 2.Freemarker模板 thymeleaf模板 thymeleaf 的优点: 支持html5标准,页面无须部署到servlet开发到服务器上,直接通过浏览器就 ...

  2. webpack 3.1 升级webpack 4.0

    webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...

  3. hdu 6185 递推+矩阵快速幂

    思路:考虑全部铺满时,前2列的放法.有如下5种情况:(转自http://blog.csdn.net/elbadaernu/article/details/77825979 写的很详细 膜一下)  假设 ...

  4. java 任务定时调度(定时器)

    任务定时调度 通过Timer和Timetask,我们可以实现定时启动某个线程. java.util.Timer 在这种实现方式中,Timer类作用是类似闹钟的功能,也就是定时或者每隔一定时间触发一次线 ...

  5. elk docker-compose

    version: '3.1' services: elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:6.2.4 c ...

  6. 《你不知道的Javascript》感悟篇—对象属性遍历的那些事

    划重点 本篇笔者将重点介绍JavaScript中 getOwnPropertyNames .Object.keys.for ... in 的使用及他们之间的异同点. getOwnPropertyNam ...

  7. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  8. java ajax上传文件

    包括案例 1.springmvc上传 2.ajax上传 3.form表单与文件上传 - 1. http://localhost:8080/ 第一种:springmvc上传- 2. http://loc ...

  9. 通过DB13备份SystemDB

    配置systemdb capital user name:SYSTEM save -back Save 现在可以通过DB13备份SystemDB Done. Congratulations!

  10. django_rest framework 接口开发(一)

    1 restful 规范(建议) 基于FbV def order(request): if request.method=="GET": return HttpResponse(' ...