• 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-->
  • 相关阅读:
    在ireport中使用checkbox
    OpenCV-Python教程(9、使用霍夫变换检测直线)
    编程挑战(6)
    [置顶] Guava学习之Immutable集合
    mongodb在PHP下的应用学习笔记
    通过Camera进行拍照
    无法删除 C_PAN.GHO: 访问被拒绝 解决办法
    使用POI生成Excel报表
    debian下使用siege进行压力测试
    jodd-servlet工具集锦
  • 原文地址:https://www.cnblogs.com/wsm777/p/13582721.html
Copyright © 2020-2023  润新知