1-9系统指令-v-for.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <div id="box">
  <ul>
    <!-- v-for相当于是一个 for循环 -->
    <li v-for="item in list" >{{item}}</li>
    <!-- 打印索引 -->
    <li v-for="(item,index) in list">{{index}}--{{item}}</li>
    <!-- 打印对象属性 -->
    <li v-for="(item,key,index) in User">索引:{{index}}--键:{{key}}--值:{{item}}</li>
    <!--防止相同属性报错-->
    <li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>

    <!-- 数字循环 -->
    <li v-for="number in 10" :key="index">{{number}}</li>
  </ul>

  </div>


  <script type="text/javascript" src="js/vue.js">

  </script>
  <script type="text/javascript">
  var vue=new Vue({
    el:'#box',
    data:{list:['tom','jerry','hankes','tom'],
          User:{name:'Tom',age:'9'}
    }

  });

  </script>

  </body>
</html>