Vue中“data”数据对象与“methods”函数定义

 

先导入CDN

?

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>

然后设置一个id选择器。

<script>
        new Vue({
            el:"#app", /*建立了一个id选择器*/
            data: {
                message:"再写一个data数据类型",
　　　　

 school:{
                    name:"昏睡的云雪",
                    mobile:"9527"
                }, /*此处有个逗号！！！*/
               campus:["山东","江西","四川","江苏"]

　　}

        })

</script>

在原结构上增加一个“school”与“campus”的数据。

在界面显示内容时，可以采用

?

1 2 3 4 5 6 7 8 9

<div id="app" >         <!--相当于使用了id选择器-->         {{ message }}      　　<h3>{{ school }}</h3> <!--整体显示下面的name与mobile-->1    <h3>{{ school.name }}</h3> <!--输出学校名称--> 2    <h3>{{ school.mobile }}</h3> <!--输出学校手机号--> 3 <!--也可以按需求显示部分-->        <ul>             <li>{{ campus }}</li><1--整体显示-->1  <li v-for="address in campus">{{ address }}</li> <!--循环显示campus中的数据--> 2   <!--其中“address”形同变量名，将“campus”数组中的数据赋给它，然后输出它-->        </ul>       </div>

然后运行

如果想要定义一些函数来使用比如设置一个按钮，点击就会增加或者减少数据的话就在”data“定义完后使用”methods“标签，注意”s“必须带，无论定义几种方法。