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});
}
})

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

  1. 微信小程序的视图与渲染

    1.组件的基本使用 <button type="default" > default </button> <button type="pri ...

  2. 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...

  3. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  4. 如何在微信小程序的模板渲染中使用JS?

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  5. 「小程序JAVA实战」小程序视图之条件判断(15)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-15/ 小程序里面也是有条件判断的,我相信大家在开发java if和jstl c:if c:when ...

  6. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  7. 微信小程序笔记

    1.文件的作用 js,wxml,wxss,json 所有页面中要用到的变量,都放在可了pages目录下 wxml:类似于html文件 wxss:类似于css文件(类, id, 标签,子代,后代,bef ...

  8. 微信小程序开发参考资料汇总

    不错的微信小程序入门教程:微信小程序入门二: 条件.遍历.网络请求.获取本地图片http://blog.csdn.net/lecepin/article/details/54016701 微信小程序入 ...

  9. 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)

    目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...

随机推荐

  1. [oracle] 两种权限:系统权限VS对象权限

    系统权限表示对表和表空间等   有无操作权  的权限.一般是SYS用户这种DBA来授权.比如: grant create session to lisi grant create table to l ...

  2. Qt::WA_DeleteOnClose 造成的野指针问题

    今天遇到了一个由Qt::WA_DeleteOnClose造成的野指针问题,在网上搜到的一个求助贴如下(http://bbs.csdn.net/topics/380182058): 主窗口类QMainW ...

  3. ubuntu12.04开启虚拟机的unity模式

    终端中输入: sudo add-apt-repository ppa:gnome3-team/gnome3 sudo apt-get update sudo apt-get install gnome ...

  4. 您可以从 Windows 命令行上运行 gcc、g++、ar、ranlib、dlltool 和其他一些 GNU 工具

    Windows 上的安装为了在 Windows 上安装 GCC,您需要安装 MinGW.为了安装 MinGW,请访问 MinGW 的主页 www.mingw.org,进入 MinGW 下载页面,下载最 ...

  5. 用C语言显示汉字的演示程序

    汉字是方块字,宽高相等的汉字库在嵌入式领域有着广泛的应用,且其解析也相对来说是比较简单的.汉字在汉字库中的索引一般会遵循GB2312/GBK编码规则,GB2312/GBK规定汉字编码由2个字节组成,其 ...

  6. linux -- Ubuntu Server 安装图形界面

    1.连接网络,你一定要确保网络通畅,如果你和我一样使用Wireless,那先找根网线插上,因为下面的安装都要通过网络下载组件的. 2.进入图形界面的命令是startX,敲击后会有安装xinit的提示. ...

  7. CentOS7设置开机自启动命令大全

    任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd  on              systemctl enable httpd.service 使某服务不自 ...

  8. jQuery checkbox选中问题之prop与attr注意点分析

    $(function () {   // 全选   $("#btnCheckAll").bind("click", function () {     $(&q ...

  9. NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

    Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

  10. python计算时间差的方法

    本文实例讲述了python计算时间差的方法.分享给大家供大家参考.具体分析如下: 1.问题: 给定你两个日期,如何计算这两个日期之间间隔几天,几个星期,几个月,几年? 2.解决方法: 标准模块date ...