前端框架之Vue(②.数组的改变)

1.首让div下面的第一行 message 改变成"你好 CSDN!"

2.创建键值对形式的 信息 让 h2中的 info.name 和 info.email 变成 "CSDN" 和 "我的博客地址"

3.编写[" "," "," "," "] 形式的数组 ,让li 标签下面的 information[0-3]变成相应的内容 ,如果索引超过数组个数  ,将不会显示内容,

4.上代码

   <div id="app">
        {{ message }}
        <h2>{{info.name}} {{info.email}}</h2>
        <ul>
            <li>{{ information[0] }}</li>
            <li>{{ information[1] }}</li>
            <li>{{ information[2] }}</li>
            <li>{{ information[3] }}</li>
            <li>{{ information[4] }}</li>
            <li>{{ information[5] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好 CSDN!",
                info: {
                    name: "CSDN",
                    mobile: "https://blog.csdn.net/qq_35733796",
                },
                information: ["初音dd疯", "CSDN", "CSDN博客", "发布文章"]
            }
        })
    </script>

5.运行结果