小程序开发：wxml语法 {{}}，if条件判断，for循环，未完待续。。。。

青旅半醒 2023-01-02 12:20 102阅读 0赞

在js代码中data的数据是可以打印在wxml中的，并且是双向绑定的；

<view> {
       { name }} </view>
    data() {
    	name: "kkkk"
    }

**if 条件判断：**  
[点击查看文档详情][Link 1]

<view wx:if="{ {1>2}}"> {
       { name }} </view>
    <view wx:elif="{ {2<3}}"> {
       { name }} </view>
    <view wx:else> 隐藏 </view>

block 标签只包含，没有任何意思。  
注意： if else 标签必须靠在一起，中间不能有其他任何标签，否则报错；

<block wx:if="{ {true}}">
    	<navigator url="XXXX/XXXX">跳转1</navigator>
    </block>
    <block wx:else>
    	<navigator url="XXXX/XXXX">跳转2</navigator>
    </block>

**for循环：** 两个属性： index（索引值）； item（每一个元素）  
[点击查看文档详情][Link 2]  
for 只能遍历数组；

<view wx:for="{ { list }}" wx:key="*this">{
       { index }}: {
       {item}}</view>
    <view wx:for="{ { list }}" wx:key="index" wx:for-index="i" wx:for-item="content">{
       { i }}: {
       {content}}</view>
    data() {
    	list:[34, 123, 312]
    }

<view wx:for="{ { listObj }}" wx:key="index">
    	<text>{
       {item.name}} age is {
       { item.age }}</text>
    </view>
    data() {
    	listObj: [
    		{name:"kk", age: 13},
    		{name:"mm", age: 14}
    	]
    }

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

发表评论取消回复

表情：

评论列表（有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序WXML之条件渲染

wx:if 在MINA中，用来判断是否需要渲染该代码块，这个和java、C中if条件判断是一样的，语法格式： `wx:if="{ {condition}}"`,双重大括

女爷i/ 2023年10月17日 09:01/ 0 赞/ 129 阅读

相关十九.wxml语法-条件判断

条件渲染一.wx:if > 在框架中, 使用`wx:if=""`来判断是否需要渲染该代码块 <view wx:if="{ {condition}}">T

叁歲伎倆/ 2023年07月09日 02:21/ 0 赞/ 16 阅读

相关小程序使用云控制台控制数据库，未完待续。。。。

1，创建数据库点击云开发，进入数据库选项，点击左侧加号进行添加，输入数据库名称； ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

逃离我推掉我的手/ 2023年01月03日 01:55/ 0 赞/ 155 阅读

相关小程序开发：wxml语法 {{}}，if条件判断，for循环，未完待续。。。。

在js代码中data的数据是可以打印在wxml中的，并且是双向绑定的； <view> { { name }} </view> data() {

青旅半醒/ 2023年01月02日 12:20/ 0 赞/ 103 阅读

相关眩光(未完待续)

概述炫光和眩光常常指一个意思．但是也可以作区分如下: <table style="width:500px;"> <tbody> <tr>

Dear 丶/ 2022年10月22日 04:18/ 0 赞/ 1283 阅读

相关 17未完，18待续

一个很短的序昨天，在 2017 年最后一天跑了人生中第一次 10 公里，留下了 17 年最后的纪念。今天，在 2018 年第一天写下第一篇博客文章，开始新的人生旅程。

Love The Way You Lie/ 2022年06月02日 03:13/ 0 赞/ 281 阅读

相关 Kotlin详尽语法分析（未完待续）

[待续][Link 1] 一、Kotlin友好的语法 Kotlin不是诞生于学术界的一些不可思议难以理解的语法，它的语法类似于很多面向对象的语法，并且非常易于理解。

川长思鸟来/ 2022年05月28日 03:37/ 0 赞/ 238 阅读

相关未完待续

1 机器规划 <table> <tbody> <tr> <td>机器规划</td> <td>角色</td> <td>部署服务</t

港控/mmm°/ 2021年12月08日 19:25/ 0 赞/ 461 阅读

相关 java 8小技巧使用（未完待续）

1 按照对象属性分组，每个值多少个。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

浅浅的花香味﹌/ 2021年09月24日 14:06/ 0 赞/ 333 阅读

相关 Less语法学习-未完待续

Less语法学习 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在

冷不防/ 2021年09月16日 17:10/ 0 赞/ 528 阅读