微信小程序 --- 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});
}
})
微信小程序 --- if/else条件渲染的更多相关文章
- 微信小程序的视图与渲染
1.组件的基本使用 <button type="default" > default </button> <button type="pri ...
- 微信小程序 教程之引用
系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...
- 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
- 如何在微信小程序的模板渲染中使用JS?
在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...
- 「小程序JAVA实战」小程序视图之条件判断(15)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-15/ 小程序里面也是有条件判断的,我相信大家在开发java if和jstl c:if c:when ...
- 微信小程序,前端大梦想(二)
微信小程序的视图与渲染 今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用 一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件 ...
- 微信小程序笔记
1.文件的作用 js,wxml,wxss,json 所有页面中要用到的变量,都放在可了pages目录下 wxml:类似于html文件 wxss:类似于css文件(类, id, 标签,子代,后代,bef ...
- 微信小程序开发参考资料汇总
不错的微信小程序入门教程:微信小程序入门二: 条件.遍历.网络请求.获取本地图片http://blog.csdn.net/lecepin/article/details/54016701 微信小程序入 ...
- 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)
目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...
随机推荐
- 一个残酷的生鲜O2O之梦
三个年轻人,毕业一年,上海浦东张江开了一家生态有机蔬菜店-稻香麦甜. 首先,这不是一个关于成功励志的故事,相反的,我们走向了悬崖.经营2个月,最终以签字转让结束了实体店. 准备阶段 我,首先辞职,那时 ...
- C++/C语言的标准库函数与运算符的区别new/delete malloc/free
malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存.下面来看他们的区别. 一.操作对象有所不同 malloc与free是C++ ...
- Hive SQL的编译过程
文章转自:http://tech.meituan.com/hive-sql-to-mapreduce.html Hive是基于Hadoop的一个数据仓库系统,在各大公司都有广泛的应用.美团数据仓库也是 ...
- 关于VS2013常用到的快捷键
版本一 VS2013常用快捷键: 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键“Ctrl + -”: 2)前进到下一个光标位置:“Ctrl + Shift + - ...
- e669. 绘制缓冲图像
To draw on a buffered image, create a graphics context on the buffered image. // Create a graphics c ...
- 科技发烧友之3d吉米投影
http://item.jd.com/1558081.html?r=1434635270480#comment 暴风199的墨镜
- html5移动端根据百度地图api获取详细地址
<script type="text/javascript" src="js/BMap.js" ></script> <scrip ...
- 使用存储过程将Oracle数据批量导出为多个csv文件
数据库有如下表结构: user_info ( user_id NUMBER primary key, user_name VARCHAR2(200) NOT NUL ...
- A complete example using RAISE_APPLICATION_ERROR : raise_application_error
from:http://www.java2s.com/Tutorial/Oracle/0480__PL-SQL-Programming/AcompleteexampleusingRAISEAPPLIC ...
- MySQL<数据库的高级操作>
数据库的高级操作 MySQL提供了一个mysqldump命令,它可以实现数据的备份 数据的备份 1.备份单个数据库 mysqldump -uusername -ppassword dbname [tb ...