1. 程式人生 > >Vue學習(五)——v-if,v-show,v-for指令

Vue學習(五)——v-if,v-show,v-for指令

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>v-if,v-show,v-for指令</title>
   <script src="./vue.js"></script>
</head>
<body>
   <div id="root">

    <!-- v-if 如果給定值為true則顯示,否則會刪除dom元素-->
    <!-- v-show 如果給定值為true則顯示,否則新增display: none;的樣式  頻率更大的時候,選擇更好-->
    <!-- v-for 迴圈 新增key屬性,提高效能,值也可以為item,key值不可以相同-->

    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>

    <ul>
       <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

   </div>

   <script>
    new Vue({
     el:"#root", 
     data:{
     	show:true,
     	list:[1,2,3]
      },
      methods:{
        handleClick:function(){
           this.show=!this.show;
        }
     }
  })
   </script>
</body>
</html>

注:學習筆記內容來自:https://www.imooc.com/learn/980
官網:cn.vuejs.org