（6）打鸡儿教你Vue.js

快来打我* 2021-09-20 13:42 75阅读 0赞

循环语句

循环使用 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>

--------------------

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

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[1240]: /images/20210724/d9eda03b13894698a2fc9a2f9dc20cb7.png
[1240 1]: /images/20210724/82ba8b5bac634076a09eeeb136ad65c2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，75人围观）

还没有评论，来说两句吧...

相关阅读

相关（20）打鸡儿教你Vue.js

vue-cli 快速创建工程，工程化项目目录 ![image.png][] ![image.png][image.png 1] ![image.png][image.p

「爱情、让人受尽委屈。」/ 2021年09月29日 05:00/ 0 赞/ 270 阅读

相关（12）打鸡儿教你Vue.js

组件语法格式如下： Vue.component(tagName, options) <tagName></tagName> <div

小鱼儿/ 2021年09月20日 13:50/ 0 赞/ 477 阅读

相关（11）打鸡儿教你Vue.js

表单 v-model 指令在表单控件元素上创建双向数据绑定 ![image][] <div id="app"> <p>单个复选框：</p>

「爱情、让人受尽委屈。」/ 2021年09月20日 13:50/ 0 赞/ 241 阅读

相关（10）打鸡儿教你Vue.js

事件处理器 <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p

客官°小女子只卖身不卖艺/ 2021年09月20日 13:48/ 0 赞/ 267 阅读

相关（8）打鸡儿教你Vue.js

监听属性监听属性 watch 通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size

╰半夏微凉°/ 2021年09月20日 13:46/ 0 赞/ 394 阅读

相关（7）打鸡儿教你Vue.js

计算属性 computed <div id="app"> { { message.split('').reverse().join(''

以你之姓@/ 2021年09月20日 13:44/ 0 赞/ 429 阅读

相关（6）打鸡儿教你Vue.js

循环语句循环使用 v-for 指令 <div id="app"> <ol> // 有序 <li v-for="item in items">

快来打我*/ 2021年09月20日 13:42/ 0 赞/ 76 阅读

相关（5）打鸡儿教你Vue.js

条件与循环条件判断使用 v-if 指令 <p v-if="seen"> <template v-if="ok"> <script> ne

我不是女神ヾ/ 2021年09月20日 13:42/ 0 赞/ 266 阅读

相关（3）打鸡儿教你Vue.js

vue.js是一套构建用户界面的渐进式框架 vue关注视图层，采用自底向上增量开发的设计 <div id="app"> <p>{ { me

落日映苍穹つ/ 2021年09月20日 13:34/ 0 赞/ 312 阅读

相关（1）打鸡儿教你Vue.js

当今世界不会Vue.js，前端必定路难走一个JavaScript MVVM库以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaSc

柔情只为你懂/ 2021年09月20日 10:22/ 0 赞/ 306 阅读