微信小程序利用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 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
yii添删改查实例
2015/11/16 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python 多线程实例详解
2017/03/25 Python
Python微信公众号开发平台
2018/01/25 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python获取中文字符串长度的方法
2018/11/14 Python
详解KMP算法以及python如何实现
2020/09/18 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
双创工作实施方案
2014/03/26 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2016大学军训心得体会
2016/01/11 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
解析原生JS getComputedStyle
2021/05/25 Javascript
浅谈PHP7中的一些小技巧
2021/05/29 PHP
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python