专栏首页算法与编程之美微信小程序|逻辑判断

微信小程序|逻辑判断

在开发微信小程序的时候,有时我们需要根据条件来决定一些内容是否渲染(显示或隐藏)

例如当条件为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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:来人间凑数

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|宫格导航设计

    首先要熟悉小程序的开发流程:在js里提供数据,在wxml里绑定数据,在wxss里添加样式。

    算法与编程之美
  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • 微信小程序|下拉菜单

    下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择...

    算法与编程之美
  • 干货 | 扒一扒小程序开发中遇到的那些坑!

    开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

    极乐君
  • 小程序开发踩坑指南

    小程序组件分为原生组件和非原生组件,原生组件属于客户端的组件,在WebView的渲染流程之外的,且层级在所有非原生组件之上(无论你如何改z-index都没用的)...

    Clayman Twinkle
  • JavaScript 103 条技能

    1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var ic...

    琯琯
  • 原生态纯JavaScript 100大技巧大收集---你值得拥有(51--100)

    56、原生JavaScript全角半角转换,iCase: 0全到半,1半到全,其他不转化

    用户1272076
  • php检测值是否存在二维数组

    本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn

    仙士可
  • 前端-JavaScript 有用的代码片段和 trick

    解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否者会失败并返回NaN。

    grain先森
  • Vue-cli父子组件之间传参

    小小咸鱼YwY

扫码关注云+社区

领取腾讯云代金券