vue_for循环及遍历

1.if的基本使用

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

 food:[{　　　　　　　id:1,

                    fname:"米饭",

                    ename:"rise"

                },{

　　　　　　　　　　　　id:2,

                    fname:"水果",

                    ename:"fruits"

                },{

　　　　　　　　　　　　id:3,

                    fname:"水",

                    ename:"water"

                }]

            },

3.for的对象的遍历

   <div id="xxoo"><div v-for="(v,k,i) in str">{{v + "--------" + k + "--------" + i}}</div>                       //遍历 <!-- v是对象属性值    k是属性   i是index-->

    </div>
    <!-- result:   libin--------name--------0
          18--------age--------1
          computergame--------hobby--------2
          猫妖--------girlfriend--------3 -->

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var pp = new Vue({
            el: "#xxoo",
            data: {
                str: {
                    name: "libin",
                    age: "18",
                    hobby: "computergame",
                    girlfriend: "猫妖",                //引用对象
                }
            },
            methods: {

            },
        })

    </script>

4.if和for一起用

<div v-if="v === 'libin'" v-for="(v,k,i) in str">{{v + "--------" + k + "--------" + i}}</div>    
//解释：  当对象的值是’libin’   显示关于’libin’的属性和属性值

<!-- v是对象属性值 k是属性 i是index-->