微信小程序利用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 回车事件实现代码
Aug 23 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
浅谈克隆 JavaScript
Nov 02 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实现下载文件的两种方法
2013/07/05 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
js闭包学习心得总结
2018/04/17 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python如何从文件读取数据及解析
2019/09/19 Python
Ref与out有什么不同
2012/11/24 面试题
实习护士自我鉴定
2013/10/13 职场文书
汽车驾驶求职信
2013/10/25 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
语文课外活动总结
2014/08/27 职场文书
银行实习推荐信
2015/03/27 职场文书
《颐和园》教学反思
2016/02/19 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS