微信小程序利用button控制条件标签的变量问题


Posted in Javascript onMarch 15, 2020

问题描述

在小程序中如何利用button按钮来实现控制条件标签的变量呢?这也许是许多小伙伴们的问题,今天就来简单的给大家演示一遍。

解决方案

第一步:

首先打开微信公众平台,将一个 primary 的 button 按钮代码复制到开发平台上,再为其绑定一个名为 ” bindfirst ” 的事件。(当然这个 bindfirst 的事件需要在 js 中去定义,下面的步骤将会去定义)

代码如下:

<view>
<button type="primary" bindtap="bindfirst"> 点一下就改变 </button>
</view>

第二步:

创建一个text用来 if 条件标签来控制,同时在 js 中定义一个空的量。

将if条件的定义一个 judge 变量给其赋值为 true ( if 条件标签如果为 true ,则显示 text ,如果为 false 则不显示 text ),再在 button 所绑定的事件中去改变 text 的值即可。

代码如下:

wxml代码

<view>
<button type="primary" bindtap="bindfirst"> 点一下就改变 </button>
<text wx:if="{{judge}}">{{text}}</text>
</view>

js代码

Page({
data: {
text:[],
judge:true,
},
onLoad: function () {
},
bindfirst:function(){
var s=this.data.judge
this.setData({text:" 你点击了我 " ,judge:!s})
}
})

第三步:

得到运行结果。

微信小程序利用button控制条件标签的变量问题微信小程序利用button控制条件标签的变量问题

图 1 图例

点击一次时,会出现text,当点击第二次时就会关闭 text ,因为 bindfirst 中利用改变 judge 的值为 true 和 false 来达到改变 text 。

结语

点击button时就会触发绑定的 bindfirst 事件,而 bindfirst 事件中是 text 的变量,而 data 中所定义的 text 是一个空值;点击时就会改变 text 中的量,从而达到简单的 if 条件标签的用 button 来控制。

总结

到此这篇关于微信小程序利用button控制条件标签的变量问题的文章就介绍到这了,更多相关微信小程序button控制条件标签的变量 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
详解Vue中watch的高级用法
May 02 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 #Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 #Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 #Javascript
You might like
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
input的focus方法使用
2010/03/13 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
bootstrap响应式工具使用详解
2017/11/29 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python得到单词模式的示例
2018/10/15 Python
详解python中的数据类型和控制流
2019/08/08 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
倡议书的写法
2014/08/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
教师工作证明范本
2015/06/12 职场文书