7.Vue2-循环语句的用法

题记

vue2循环语句的用法

v-for

绑定数组
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'ng1' },
      { name: 'ng2' },
      { name: 'ng3' }
    ]
  }
})
</script>
</body>
</html>

实例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'ng1' },
      { name: 'ng2' },
      { name: 'ng3' }
    ]
  }
})
</script>
</body>
</html>
v-for迭代对象
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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 in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '111',
      url: '222',
      slogan: '333'
    }
  }
})
</script>
</body>
</html>
键名
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '111',
      url: '222',
      slogan: '333'
    }
  }
})
</script>
</body>
</html>
索引
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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 }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '111',
      url: '222',
      slogan: '333'
    }
  }
})
</script>
</body>
</html>
v-for迭代整数
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

后记

觉得有用可以点赞或收藏!

相关推荐
2345VOR3 分钟前
【C#地图显示教程:实现鼠标绘制图形操作】
开发语言·c#·计算机外设·地图显示鼠标交互
Kagol5 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
开开心心_Every9 分钟前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
星释9 分钟前
优雅的Java:01.数据更新如何更优雅
java·开发语言·spring boot
The_era_achievs_hero10 分钟前
微信131~140
开发语言·javascript·微信
LeonYangRyeon11 分钟前
解锁SQL“密码”:SELECT DISTINCT END AS的深度剖析与实战指南
java·开发语言
然我15 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
☆璇1 小时前
【数据结构】排序
c语言·开发语言·数据结构·算法·排序算法
我要成为c嘎嘎大王1 小时前
【C++】初识C++(1)
开发语言·c++
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript