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”的数据。

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

<div id="app" >
        <!--相当于使用了id选择器-->
        {{ message }}
     　　<h3>{{ school }}</h3> <!--整体显示下面的name与mobile-->

   <h3>{{ school.name }}</h3> <!--输出学校名称-->
   <h3>{{ school.mobile }}</h3> <!--输出学校手机号-->
<!--也可以按需求显示部分-->

        <ul>
            <li>{{ campus }}</li><1--整体显示-->

 <li v-for="address in campus">{{ address }}</li> <!--循环显示campus中的数据-->
  <!--其中“address”形同变量名，将“campus”数组中的数据赋给它，然后输出它-->

然后运行

        </ul>
      </div> 

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