VUE学习日记（二） ---- 判断 v-if 循环 v-for

v-if  v-for 使用

 

<div id="myPage">
      <h3>人员列表</h3>
      <div v-if="isshow">七年级一班人员列表</div>
      <div v-show="isshow">七年级一班人员列表</div>
      <ol>
        <li v-for="person in persons">姓名：{{person.name}} 年龄：{{person.age}}</li>
      </ol>
    </div>    

    <script>
      var myPage = new Vue({
        el:'#myPage',
        data:{
          isshow:true,
          persons:[
            {name:'张三',age:20},
            {name:'李四',age:22},
            {name:'王五',age:19}
          ]
        }
      })
    </script>

 

 

效果展示：

 

 

 

 

小常识：

v-if 和 v-show区别    v-if在为false时页面无此标签  v-show有此标签等同于display:none。