【基础】循环

循环

• 循环数组

  • html

  <div id="app">
      <ol>
          <li v-for="item in list">{{item.content}}</li>
      </ol>
  </div>
  

  • js

  <script>
      // 初始化数据
      window.onload = function () {
          var vue = new Vue({
              el: '#app',
              data: {
                  list: [{
                          content: '内容1'
                      },
                      {
                          content: '内容2'
                      },
                      {
                          content: '内容3'
                      },
                  ]
              }
          });
      };
  </script>
  

• 循环对象

  • html

  <div id="app">
      <ul>
          <li v-for="(item,key) in json">{{item}}.{{key}}</li>
      </ul>
  </div>
  

  • js

  <script>
      // 初始化数据
      window.onload = function () {
          // vue
          var vueApp = new Vue({
              el: '#app',
              data: {
                  json: {
                      a: 'A',
                      b: 'B',
                      c: 'C'
                  }
              }
          });
      };
  </script>