微信小程序|逻辑判断
时间:2022-07-23
本文章向大家介绍微信小程序|逻辑判断,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在开发微信小程序的时候,有时我们需要根据条件来决定一些内容是否渲染(显示或隐藏)
例如当条件为true时,view组件会渲染出来,为false时,不会渲染出来。
1.wx:if的使用
第一种直接传入:
<view wx:if="{{true}}">哈哈哈</view>//view组件会渲染出来<view wx:if="{{false}}">哈哈哈</view> //view组件不会渲染出来
第二种变量控制:
定义一个变量为isShow,在js的页面的初始数据data里面变换true或false
.wxml
<view wx:if="{{isShow}}">哈哈哈</view>
.js
data: { isShow:true,//当这个变量为true,渲染出来//false,不会渲染出来},
第三种切换控制:通过组件,切换是否显示内容
例如给button组件一个点击属性,在js里面通过setData改变isShow这个变量,isShow: !this.data.isShow,即对原来的值取反
.wxml
<button bindtap="handleSwitchShow">切换显示</button><view wx:if="{{isShow}}">哈哈哈</view>
.js
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, handleSwitchShow() { this.setData({ isShow: !this.data.isShow }) },
2.wx:else/wx:elif的使用
用于多个条件的判断,定义一个score变量,给它一个数值,data: {score:90 }
通过wx:elif/wx:else判断
.wxml
<view wx:if="{{score >=90}}">优秀</view><view wx:elif="{{score >=80}}">良好</view><view wx:elif="{{score >=60}}">及格</view><view wx:else>不及格</view>
.js
/** * 页面的初始数据 */ data: { score:90, },
3.wx:if与hidden区别
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
区别:
wx:if 是遇 true 显示,遇 false 不显示。它将一个组件隐藏时,该组件没有渲染,即不存在没有创建。用于显示和隐藏切换频率低时。
hidden 是遇 false 显示,遇 true 不显示。它将一个组件隐藏时,该组件依然存在,渲染但不显示,仅仅是通过css的display:none属性控制。用于显示和隐藏切换频率高时。
END
- JavaScript前端和Java后端的AES加密和解密
- 《Spark MLlib 机器学习实战》1——读后总结
- angularjs自定义指令实现分页插件
- A+B for Input-Output Practice (V)
- 机器学习——相似度算法汇总
- 白话推荐系统——从原理到实践,还有福利赠送!
- 基于Spring Boot的Logback日志轮转配置
- Java程序员的日常—— Spring Boot单元测试
- Windows下TensorFlow安装指南(图文版)
- 20120918-双向链表类定义《数据结构与算法分析》
- 20120918-LIST类定义《数据结构与算法分析》
- Scala入门学习笔记四--List使用
- 20120918-向量实现《数据结构与算法分析》
- hadoop 1.x环境搭建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- docker-compose部署php项目实例详解
- Linux下通过sed命令对kv方式的配置文件进行修改
- laravel5.6框架操作数据curd写法(查询构建器)实例分析
- PHP基于timestamp和nonce实现的防止重放攻击方案分析
- 怎么在 Linux 中查找一个命令或进程的执行时间
- laravel5.6 框架邮件队列database驱动简单demo示例
- php layui实现前端多图上传实例
- 解决Centos7下crontab+shell脚本定期自动删除文件问题
- PHP使用ajax的post方式下载excel文件简单示例
- laravel邮件发送的实现代码示例
- php curl发送请求实例方法
- ubuntn备份办法总结(四种)
- PHP中散列密码的安全性分析
- php的RSA加密解密算法原理与用法分析
- PHP实现微信提现(企业付款到零钱)