当前位置 博文首页 > HWP:VUE的data数据对象

    HWP:VUE的data数据对象

    作者:[db:作者] 时间:2021-07-09 09:37

    data:数据对象:

    ◆Vue中用到的数据定义在data中
    ◆data中可以写复杂类型的数据
    ◆渲染复杂类型数据时,遵守js的语法即可

    结果:

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>data:数据对象</title>
    </head>
    
    <body>
        <div id="app">{{msg}}
            <h2>{{msg}}</h2>
            {{school.name}}{{school.mobile}}
            <!-- 数组输出方式比较特殊 -->
            <ul>一共:
                <li>
                    {{campus}}
                </li>
            </ul>
            <ul>分散:
                <li>
                    {{campus[0]}}
                </li>
                <li>
                    {{campus[1]}}
                </li>
                <li>
                    {{campus[2]}}
                </li>
            </ul>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <div id="app"></div>
        <script>
            var app = new Vue(
                {
                    el:"#app",
                    data:{msg:"你好呀!VUE!",
                    school:{
                        name: "胖纸",
                        mobile:"400-618-9090"
                    },
                    campus:["北京校区","上海校区","广州校区"]
                                   }
                }
            )
        </script>
        
    </body>
    </html>


    ?

    cs