当前阅读教程:Vue.JS入门教程 > 事件中如何读取data里面的数值 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: v-on指令 方法调用 | 下一篇: 方法参数几种使用方式 |
调用语法 this.属性名 this指的是当前vue对象。 示例我们在下面实例中定义了一个字符串属性shuxing1,然后定义了一个test,我们在test方法中通过this引用当前vue的对象,使用this.属性名也就是this.shuxing1即可访问到vue对象中data定义的属性shuxing1的值。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js-事件中如何读取data里面的数值</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--v-on 可以接收一个定义的方法来调用--> <button v-on:click="test">点击查看</button> </div> <script> //Vue语句-开始 new Vue({ el: '#app', data: { shuxing1:"黄菊华老师" //属性初始化 }, methods:{ //自定义方法 test:function(event){ alert(this.shuxing1) //使用this调用data里面的属性 if(event){ alert(event.target.tagName) } } } })//Vue语句-结束 </script> </body> </html>
效果图 |
|
上一篇: v-on指令 方法调用 | 下一篇: 方法参数几种使用方式 |