【微信小程序】详解wx:if elif else的用法(搭配view、block)

最新推荐文章于 2024-06-05 22:37:13 发布
最新推荐文章于 2024-06-05 22:37:13 发布
阅读量3k 收藏
点赞数 2
分类专栏： 小程序
原文链接：https://www.cnblogs.com/xuzhengzong/p/7121113.html
版权

 

1、搭配view

复制代码

<view wx:if="{{boolean==true}}">
    <view class="bg_black"></view>
</view>
<view wx:elif="{{boolean==false}}">
    <view class="bg_red"></view>
</view>
<view wx:else>
    <view class="bg_red"></view>
</view>

复制代码

2、搭配block

复制代码

<block wx:if="{{boolean==true}}">
    <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
    <view class="bg_red"></view>
</block>
<block wx:else>
    <view class="bg_red"></view>
</block>

复制代码

叶落无痕123
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序wx:if与wx:else多条件判断
Dove言和
03-04 3万+
wx:if 多条件判断 <view wx:if="{{condition}}">单个条件</view> <view wx:if="{{condition1|| condition2}}">多个或条件</view> <view wx:if="{{condition1&& condition2}}">多个且条件</v...
（二）02-WXML模板语法详解-条件渲染 ——wx：if、wx：elif和wx：else用法 & block标签用法 & hidden属性用法
weixin_44867717的博客
10-15 1354
条件渲染 wx:if wx:else wx:elif wx:else <view wx:if='{{score>=90}}'>优秀</view> <view wx:elif='{{score<90&&score>=80}}'>良好</view> <view wx:elif='{{score<80&&score>=60}}'>一般</view> <
微信小程序-条件渲染
最新发布
weixin_42284031的博客
06-05 418
使用wx:if , wx:elif , wx:else进行条件渲染，当条件为true的时候显示，否则不显示。在.wxml里面进行条件渲染否则都会报错。
Vue基础--Vue中的条件判断和列表渲染指令
qq_44749491的博客
09-27 4633
条件判断指令和条件渲染指令的使用和注意点
微信小程序详解wx:if elif else的用法(搭配view、block)
编程之美
08-28 2万+
1、搭配view <view wx:if="{{boolean==true}}"> <view class="bg_black"></view> </view> <view wx:elif="{{boolean==false}}"> <view class="bg_red"></view> </view> <view wx:else> <view class="bg_re
【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式
苏凉.py的博客
07-23 2403
微信小程序条件渲染和列表渲染。
wx:if 与wx:else
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-10 2万+
看官方文档wx:if 与wx:else 是放在 条件渲染里面来讲的的, 由此可以看出他们的作用就是渲染之类的作用 官方文档地址 看先一些说明吧: 一个简单的例子: 有个图片默认的时候不显示,点击按钮的时候才让图片显示 这个时候使用wx:if 挺好的,条件渲染嘛 给出代码: <view> <image src='http://pl3g5zt02.b...
微信小程序之wx:if wx:else的使用
打不死的小五
04-22 2万+
本篇文章以账号密码登录界面为例介绍wx:if与wx:else的使用。
微信小程序练习demo：数据绑定条件渲染练习117.zip
05-04
在微信小程序中，我们通常使用`<block wx:if="{{condition}}" />`或`<view wx:if="{{condition}}" />`来实现。如果`condition`为真，对应的元素会被渲染到页面上；反之，则不会显示。此外，还有`wx:elif`和`wx:else`...
微信小程序 条件渲染详解
11-23
`wx:if`是微信小程序中用于条件控制的关键属性，它的基本用法是在标签上添加`wx:if="{{condition}}"`，其中`condition`是一个表达式，当这个表达式为真时，该标签及其内部的内容会被渲染到页面上。例如： ```html ...
微信小程序demo：网易云课堂：tab切换菜单
03-15
- **条件渲染**：利用`<block wx:if="{{ condition }}" />`或`<view wx:elif="{{ condition }}" />`、`<view wx:else="{{ condition }}" />`来根据数据状态决定渲染哪个内容块。 此外，对于网易云课堂这样的应用...
微信小程序页面渲染实现方法
01-03
这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 条件渲染：wx:if, wx:elif, wx:else <view wx:if={{list....
小程序 block_微信小程序自定义导航条组件
weixin_39623273的博客
12-04 148
类似知乎小程序的自定义导航条首先将小程序的导航条设置为自定义状态，在app.json里把navigationStyle属性设置为custom在文件区中创建自己的组件json：{ "component": true, "usingComponents": {} }wxml:<view class="main"> <view class="statusBarHeigh...
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明
m0_63622279的博客
07-12 4248
当condition条件为true时，代码块渲染显示，为false时，代码块不进行渲染.可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断 1.2. block标记 可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。 block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。从下面的例子来观察下，渲染出的页面结构有何特点： block标签未曾渲染，只是充当一个包裹性质的容器学过前端三剑客的应该看到这个属性就明白了，h
微信小程序从入门到精通（一） 基础知识与代码构成
小灯光环
01-21 1万+
关于微信小程序的基础知识与代码构成~
微信小程序开发系列（二十五）·wxml语法·条件渲染wx:if, wx:elif, wx:else 属性组以及hidden 属性的使用
时光の尘的博客
03-10 4418
条件渲染主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式:1. 使用 wx:if, wx:elif, wx:else 属性组2. 使用 hidden 属性wx:if 和 hidden 二者的区别：1. wx:if：当条件为 true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点 的方式来实现。2. hidden：当条件为 true 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性 来实现的。
微信小程序教程系列
热门推荐
michael的博客
01-24 8万+
微信小程序教程系列
小程序block标签配合if和else
weixin_30887919的博客
06-03 443
<block wx:if="{{hasMore}}"> <view class="loading-tip">拼命加载中…</view> </block> <block wx:else> <view class="loading-tip">没有更多内容了</vie...
微信最新登录按钮更新
baidu_41899377的博客
04-22 180
uniapp开发小程序对于新的获取用户名和手机号方式 <!-- 旧版本方式 --> <!-- #ifdef MP-WEIXIN --> <block v-if="canIUseProfile==false"> <button class="cu-btn bg-...
小程序里面wx：if 和else怎么配合使用
06-12
在小程序中，`wx:if`和`wx:else`通常用于控制页面中某个元素是否显示。当`wx:if`的值为`true`时，对应的元素会被渲染出来，否则不会被渲染。而`wx:else`则用于表示`wx:if`的值为`false`时应该显示的内容。下面是`wx:if`和`wx:else`的基本使用方法： ```html <view wx:if="{{condition}}"> 这里是条件为真时应该显示的内容 </view> <view wx:else> 这里是条件为假时应该显示的内容 </view> ``` 在上面的代码中，`condition`是一个布尔类型的变量或表达式。当`condition`为`true`时，第一个`view`标签中的内容会被渲染出来；当`condition`为`false`时，则会渲染第二个`view`标签中的内容。 需要注意的是，`wx:if`和`wx:else`必须放在同一层级中，不能嵌套使用。如果需要多个条件判断，可以使用`wx:elif`标签，例如： ```html <view wx:if="{{condition1}}"> 这里是条件1为真时应该显示的内容 </view> <view wx:elif="{{condition2}}"> 这里是条件2为真时应该显示的内容 </view> <view wx:else> 这里是以上条件均为假时应该显示的内容 </view> ``` 在上面的代码中，当`condition1`为`true`时，第一个`view`标签中的内容会被渲染出来；当`condition1`为`false`且`condition2`为`true`时，第二个`view`标签中的内容会被渲染出来；否则，第三个`view`标签中的内容会被渲染出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值