当前阅读教程:Uni-app入门到精通教程 > 5.1.3 事件的定义和使用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 5.1.2 变量的定义和使用 | 下一篇: 5.1.4 使用事件改变变量的值 |
5.1.3 事件的定义和使用我们最常用的事件是点击事件,我们在需要的组件属性里面添加如下代码即可: @click="事件名" 我们接下来做一个实例:在按钮中定义一个点击事件;该点击事件弹出一个提示框。 完整代码如下: <template> <view> <!--@click="dianji" 表示点击事件,=后面是要处理的方法(函数)名称--> <button @click="dianji">点击按钮,调用点击事件</button> </view> </template>
<script> export default { data() { return {
} }, //自定义方法都是写在methods代码块内 methods: { //自定义点击按钮的处理方法(函数)dianji dianji:function(){ //点击按钮的时候,弹出提示框 uni.showToast({ title:"点击了按钮" //提示框内容 }) } } } </script>
<style> /*按钮样式*/ button{ width: 80%; /*宽度*/ margin-top: 10px;/*顶部外边距*/ } </style> 【uniapp参考资料】 (1)uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 (2)uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 (3)基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 (4)毕业设计网 (5)小程序编程网 (6)计算机编程网 |
|
上一篇: 5.1.2 变量的定义和使用 | 下一篇: 5.1.4 使用事件改变变量的值 |