 |
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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指令 方法调用 | 下一篇： 方法参数几种使用方式 |
