<body>
<!--修饰符-->
<div id="app">
    <!--v-if 当条件为false时，包含v-if的元素根本不会显示在dom中-->
    <p v-if="false">{{message}}</p>
    <!--v-show   表示display：none-->
    <p v-show="false">{{message}}</p>
    <br>
    <!--遍历数组  拿到下标值-->
    <p v-for="(item ,index) in items">
        {{index+1}}.{{item}}
    </p>

    <!--遍历对象{value,key,index}  只是获取一个值，拿到是是value值-->
    <p v-for="(value,key) in info">
        {{key}}-{{value}}
    </p>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
          message:"hello" ,
           items:[ "haha",
               'asda',
               'asdfasd',
               'asddddd'],
           info:{
              name:'why',
               age:12,
               height:1.8
           }
       }
   })

</script>
官方推荐，在使用v-for时给对应的元素添加一个key值
<body>
<!--修饰符-->
<div id="app">
    <!--v-if 当条件为false时，包含v-if的元素根本不会显示在dom中-->
    <p v-if="false">{{message}}</p>
    <!--v-show   表示display：none-->
    <p v-show="false">{{message}}</p>
    <br>
    <!--遍历数组  拿到下标值-->
    <!--保证key和展示的元素是一一对应的，则在复用时候会与原来进行对比，中间插入元素效率高-->
    <p v-for="(item ,index) in items" :key="item">
        {{index+1}}.{{item}}
    </p>

    <!--遍历对象{value,key,index}  只是获取一个值，拿到是是value值-->
    <p v-for="(value,key) in info">
        {{key}}-{{value}}
    </p>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
          message:"hello" ,
           items:[ "haha",
               'asda',
               'asdfasd',
               'asddddd'],
           info:{
              name:'why',
               age:12,
               height:1.8
           }
       }
   })