v-for的用法

最新推荐文章于 2024-08-26 15:50:40 发布

hamimelon2020

最新推荐文章于 2024-08-26 15:50:40 发布

阅读量140

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/115319359

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏

自己乱写的

<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <body>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
            <div id="app">

            < v-for: in fruits />
                
            </div>
            <script>
                var vm = new Vue({
                    el: '#app',
                    data: {
                        fruits: {
                            name: '苹果',
                        }
                    },
                    beforeCreate(){
                        console.group('beforeCreate 创建前状态');
                        console.log("%c%s", "color:red", "el : "+this.$el);
                        console.log("%c%s", "color:red", "data : "+this.$data);
                        console.log("%c%s", "color:red", "url: "+this.url);
                    },
                    created(){
                        console.group('created 创建完毕状态');
                        console.log("%c%s", "color:red", "el  : "+this.$el);
                        console.log("%c%s", "color:red", "data : "+this.$data);
                        console.log("%c%s", "color:red", "url: "+this.url);
                    }
                })
            </script>
            

            
        </body>
    </head>
</html>

更正后，结果为

<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <body>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
            <div id="app">
                <ol>
                    <li v-for='value in arr'>
                        {{value}}
                    </li>
                </ol>     
            </div>
            <script>
                var vm = new Vue({
                    el: '#app',
                    data: {
                        arr: ['苹果','梨子','橘子','芒果'],
                        json:{a:'丽丽',b:'小明',c:'小红',}
                        },
                    beforeCreate(){
                        console.group('beforeCreate 创建前状态');
                        console.log("%c%s", "color:red", "el : "+this.$el);
                        console.log("%c%s", "color:red", "data : "+this.$data);
                        console.log("%c%s", "color:red", "arr: "+this.arr);
                    },
                    created(){
                        console.group('created 创建完毕状态');
                        console.log("%c%s", "color:red", "el  : "+this.$el);
                        console.log("%c%s", "color:red", "data : "+this.$data);
                        console.log("%c%s", "color:red", "arr: "+this.arr);
                    }
                })
            </script>
            

            
        </body>
    </head>
</html>