美文网首页程序员
(6)打鸡儿教你Vue.js

(6)打鸡儿教你Vue.js

作者: 魔王哪吒 | 来源:发表于2019-06-27 23:13 被阅读3次

    循环语句

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

        本文链接:https://www.haomeiwen.com/subject/avzdcctx.html