版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bowei026/article/details/91358279
上一篇文章中介绍的vue页面Hi.vue文件中介绍了变量的声明和调用,本文介绍方法的声明和调用。
修改Hi.vue文件script部分的内容,声明方法showMessage:
<script>
export default {
data () {
return {
message: 'hi, 我的第一个vue程序'
}
},
method: {
showMessage: function(name) {
alert('hi, ' + name);
}
}
}
</script>
修改Hi.vue文件template部分的内容,调用方法showMessage:
<template>
<div class='hi' @click="showMessage('Tom')">
{{message}}
</div>
</template>
对应事件处理, @click 也可以用 v-on: 代替,如
<template>
<div class='hi' v-on:click="showMessage('Tom')">
{{message}}
</div>
</template>
运行程序,点击页面的文本,会弹出提示。
本文内容到此结束,更多内容可关注公众号和个人微信号: