微信小程序 --- if/else条件渲染

if 条件渲染:当为真的时候显示,当为假的时候隐藏;

else 条件渲染:当为真的时候隐藏,当为假的时候显示;

<view wx:if="{{true}}">{{text}}</view>
<view wx:else="{{false}}">{{text}}</view>

可以这样玩:

<button bindtap="btnclick">{{text}}</button>
<view wx:if="{{onOff}}">{{text}}</view>
<view wx:else="{{onOff}}">{{text}}</view>

page.js

//获取应用实例
const app = getApp()
Page({
  data: {
    text: "点击",
    message:"不错的孩子!",
    onOff: false
  },
  btnclick:function(){
      var onOff = this.data.onOff;
      this.setData({text:"hello",onOff:!onOff});
  }
})

原文地址:https://www.cnblogs.com/e0yu/p/8488331.html

时间: 2024-11-05 22:48:10

微信小程序 --- if/else条件渲染的相关文章

【WeChat 小程序】005 - 条件渲染以及列表渲染

条件渲染 1. 概念: 只有当条件成立时才渲染生成 2.wx:if属性的设置 示例代码: <text wx:if="{{thisWeekMovie.isHighlyRecommended}}">强烈推荐</text> 注:只有当thisWeekMovie.isHighlyRecommended为真时,界面元素才会被渲染 类似的:使用hidden属性也可以实现类似的效果,但元素总是会被生成,增大初始化开销 <text hidden="{{!this

微信小程序视图层WXML_小程序条件渲染

微信小程序视图层WXML_小程序条件渲染 wx:if 在微信小程序的框架中,我们用wx:if="{{condition}}"来判断微信小程序页面是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用wx:elif和wx:else来添加一个else块: <view wx:if="{{length > 5}}"> 1 </view> &

微信小程序的HTML和Markdown格式的富文本渲染组件html2wxml,支持代码高亮

之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:https://github.com/qwqoffice/html2wxml 原文地址:https://www.cnblogs.com/goloving/p/10558503.html

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

原生微信小程序数据渲染

一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目中,app.json文件里的 { //页面配置路径 "pages":[ "page/index/index", //默认首页 "page/index/logs", ] } 正题:微信小程序原生数据渲染条件渲染:wx:if wx:elif wx:els

微信小程序视图层WXS_条件语句

微信小程序视图层WXS_条件语句 if 语句 在 WXS 中,可以使用以下格式的 if 语句 : if (expression) statement : 当 expression 为 truthy 时,执行 statement. if (expression) statement1 else statement2 : 当 expression 为 truthy 时,执行 statement1. 否则,执行 statement2 if ... else if ... else statementN

浅谈高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 前端精品教程:百度网盘下载 后来,小程序增加了「rich-text」组件用于展示富文本内

关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取

起因:意图是想实现类似于安卓viewpager那样的效果,想到了用微信小程序的swiper组件,但如果每个swiper-item里都只用一个wx:for来渲染数据的话实在是太慢了,就想到多层嵌套数据渲染来提高效率. 直接上代码 wxml: <view wx:for="{{one}}" wx:key="id"> <view>----{{item.name}}----</view> <view wx:for="{{it

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇