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>

后记

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

相关推荐
北海-cherish1 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
C嘎嘎嵌入式开发1 小时前
(2)100天python从入门到拿捏
开发语言·python
AALoveTouch2 小时前
网球馆自动预约系统的反调试
javascript·网络
Stanford_11062 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_915909062 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
Vallelonga3 小时前
Rust 中的数组和数组切片引用
开发语言·rust
Kiri霧3 小时前
Rust模式匹配详解
开发语言·windows·rust
white-persist3 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse3 小时前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学