万能前端框架uni app初探02:为按钮绑定事件

前言

上一节,我们完成了uni app开发环境的搭建,本节我们正式开始uni app的编程工作,我们为按钮绑定一个点击事件,实现点击一次修改Text显示数据的小功能。

一、基础知识

1.页面渲染

要实现本节需要的功能,需要首先了解Vue的渲染方式,Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
在这里插入图片描述
声明式渲染用法也很简单,html中调用{{ 要渲染的内容 }}即可,这点和小程序原生开发方式一致,都是调用this中数据显示,因此需要在Vue的data()中放置需要渲染的数据内容。

二、示例

将上一讲工程复制为app002
在这里插入图片描述
然后将整个文件夹拖到HBuilder中
在这里插入图片描述

1.修改pages/index/index.vue中核心代码

<template>
        <view class="container">
                <view class="view_show">
                  {{text}}
                </view>

        <button class="btn_view" type="primary" @click='btn_clicked'>中英文切换</button>
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                flag: 0,
                                text: 'hello world',
                        }
                },
                methods: {
                        btn_clicked() {
                                if (0 == this.flag)
                                {
                                        this.text = '你好 世界'
                                        this.flag = 1
                                }else
                                {
                                        this.text = "helo world"
                                        this.flag = 0
                                }
                        },
                }
        }
</script>

按钮中@click='btn_clicked’绑定按钮点击事件函数为btn_clicked,函数中修改需要渲染的数据,默认显示"hello world",点击按钮后变为"你好 世界",在此点击后恢复,如此实现中英文切换数据显示的功能。

设置居中显示,布局如下:

<style>
.btn_small {
  margin-right:15px;
  width:50px;
  border-radius: 5px;
}

.btn_view {
  margin: 15px auto;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}

</style>

三、运行

点击运行—>运行到浏览器—>Chome
在这里插入图片描述
web端显示如下:
在这里插入图片描述
点击按钮,切换为中文
在这里插入图片描述
Android具体运行过程不在描述,如有疑问,请看第一节,安装后界面如下:
在这里插入图片描述

四、结语

(1) 获取资料

如您在使用过程中有任何问题,请加QQ群进一步交流,也可以github提Issue。

QQ交流群:906015840 (备注:物联网项目交流)

源码获取:扫描下方二维码,关注公众号,回复uni app即可

一叶孤沙出品:一沙一世界,一叶一菩提
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值