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

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

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

可以这样玩:

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

page.js

  1. //获取应用实例
  2. const app = getApp()
  3. Page({
  4. data: {
  5. text: "点击",
  6. message:"不错的孩子!",
  7. onOff: false
  8. },
  9. btnclick:function(){
  10. var onOff = this.data.onOff;
  11. this.setData({text:"hello",onOff:!onOff});
  12. }
  13. })

微信小程序 --- 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. 用 phpize 编译共享 PECL 扩展库

    有时候不能用 pecl 安装命令.这可能是因为在防火墙后面,或者是因为想要安装的扩展库还没有 PECL 兼容的包,例如 SVN 中尚未发布的扩展库.如果要编译这种扩展库,可以用更底层的编译工具来手工进 ...

  2. sparkr基本操作1

    由于装的sparkr是1.4版本的,老版本的很多函数已经不再适用了. 在2台服务器的组成的集群中测试了一版数据,熟悉下这个api的基本操作.​ libpath <- .libPaths() li ...

  3. [android] AndroidManifest.xml 详解

    第1部分 标签库+包路径+版本控制 <manifest xmlns:android="http://schemas.android.com/apk/res/android" ...

  4. 在系统中使用read函数读取文件内容

    read函数(读取文件) read函数可以读取文件.读取文件指从某一个已打开地文件中,读取一定数量地字符,然后将这些读取的字符放入某一个预存的缓冲区内,供以后使用. 使用格式如下: number = ...

  5. 比較JS合并数组的各种方法及其优劣

    原文链接:  Combining JS Arrays原文日期: 2014-09-09翻译日期: 2014-09-18翻译人员: 铁锚 本文属于JavaScript的基础技能. 我们将学习结合/合并两个 ...

  6. Unity3d之Perfab

    对于重复使用的游戏体可以将其制作成Perfab.首先在Project窗口中选择[Create]-[Prefab]创建一个空的Perfab.然后将该重复使用的游戏体拖到这个空的Perfab上就OK了. ...

  7. MVC生成图片验证码,可指定位数

    前台: <h2>mvc后台生成验证码,可指定位数</h2> <img id="gc" src="GetValidateCode" ...

  8. 【Java面试题】22 JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?

    throws是获取异常throw是抛出异常try是将会发生异常的语句括起来,从而进行异常的处理,catch是如果有异常就会执行他里面的语句,而finally不论是否有异常都会进行执行的语句. thro ...

  9. java bigDecimal and double

    Java BigDecimal和double   BigDecimal是Java中用来表示任意精确浮点数运算的类,在BigDecimal中,使用unscaledValue × 10-scale来表示一 ...

  10. 零基础的人怎么学习Java

    编程语言Java,已经21岁了.从1995年诞生以来,就一直活跃于企业中,名企应用天猫,百度,知乎......都是Java语言编写,就连现在使用广泛的XMind也是Java编写的.Java应用的广泛已 ...