1.for的基本使用

    <div id="xxoo">
     <div v-if="scroe >= 90">優秀</div>
     <div v-else-if="scroe >= 80 && scroe < 90">良好</div>      //發現 v-if  || v-else || v-else-if  沒有區別

     <!-- //if結構 -->
     <div v-else-if="scroe >= 60 && scroe < 80">一般</div>
     <div v-else
 
="scroe < 60">不太行</div>
     <div v-show="flag" >oooo</div>　　　　　　　　//v-show和if的區別就是  if是渲染顯示   show是可能已經渲染  控制dispaly:none和block(實際用法)
     <button v-on:click="tention"></button>
    </div>



    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var pp = new Vue({
            el:"#xxoo",
            data:{
                scroe:20,
                flag:false, 
 
                             //v-show的布林值設定   相當於開啟block
            },
            methods:{
                tention:function(){
                    this.flag = true;
                }
            }
        })
    </script>

2.for的陣列的遍歷

    <div id="xxoo"> 
        <ul>
            <li v-for="item in str">{{item}}</li>
 
           <!--item 為形參 陣列的值  str為陣列-->>
            <li v-for="(item,index) in str">{{item + "-----" + index}}</li>    <!--index 為陣列序號-->>
        </ul>
    </div>


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

        var pp = new Vue({
            el:"#xxoo",
            data:{
                str:["你","是","傻","嗎"]
            },
            methods:{

            },
        })
    </script>

注意:遍歷的時候加上   :key="item.id"     可以增加vue的效能,提高載入速度(加不加不影響實際效果,但是在遍歷的時候都加上比較好)
  例:

    <li :key="item.id" v-for="(item,index) in str">{{item + "-----" + index}}</li>    <!--index 為陣列序號-->>     //id為data裡面陣列物件的id屬性