vue_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>

    <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属性