zoukankan      html  css  js  c++  java
  • vue26-2.0循环

            
    3. 循环
        2.0里面默认就可以添加重复数据
    
        arr.forEach(function(item,index){
    
        });
    
        去掉了隐式一些变量
            $index    $key
    
        之前:
            v-for="(index,val) in array"
        现在:
            v-for="(val,index) in array"
    
    
    4. 可以添加重复数据:track-by="id"
        变成
            <li v-for="(val,index) in list" :key="index">
       :key="index"是为了提升循环性能
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue1.0.js"></script>
        <script>
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        list:['width','height','border']
                    },
                    methods:{
                        add(){
                            this.list.push('background');
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="添加" @click="add">
            <ul>
                <li v-for="val in list" track-by="$index">
                    {{val}}
                </li>
            </ul>
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        list:['width','height','border']
                    },
                    methods:{
                        add(){
                            this.list.push('background');
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="添加" @click="add">
            <ul>
                <li v-for="(val,index) in list">
                    {{val}} {{index}}
                </li>
            </ul>
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        list:{//json
                            a:'apple',
                            b:'banana',
                            c:'cell'
                        }
                    },
                    methods:{
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="添加">
            <ul>
                <li v-for="(val,key) in list">
                    {{val}} {{key}}
                </li>
            </ul>
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        list:['width','height','border']
                    },
                    methods:{
                        add(){
                            this.list.push('background');
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="添加" @click="add">
            <ul>
                <li v-for="(val,index) in list" :key="index">
                    {{val}} {{index}}
                </li>
            </ul>
        </div>
    </body>
    </html>
  • 相关阅读:
    8小时外你做什么?下班后的生活决定你的竞争力
    8个月,一位年轻总裁的坠落:值得所有职业经理人深思
    陈紫熹(帮别人名字作诗)
    年轻人创业尤其要注意的五个基本法则
    解密联想20年的45条法则
    小本创业】30条生意妙经及七大关键感悟
    新时代白领必备的两大“新”能力,你有吗?
    秘笈:送给创业者的19条忠告
    C#计算两个日期之间的差
    tnsnames.ora是什么东东?
  • 原文地址:https://www.cnblogs.com/yaowen/p/6985726.html
Copyright © 2011-2022 走看看