微信小程序模板语法

2021-09-22 23:31:35 阅读：297 来源： 互联网

模板语法

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

WXML和HTML的不同：

WXML中的text相当于HTML中的span
WXML中的view相当于HTML中的div
WXML中的checkbox相当于HTML中的复选框

数据绑定

Page({
    data:{
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            name:"王",
            age:50
        },
        isChecked:false
    }
})

<!--字符串-->
<view>{{msg}}</view>
<!--数字-->
<view>{{num}}</view>
<!--bool类型-->
<view>是否是伪娘{{isGirl}}</view>
<!--object-->
<view>{{person.age}}</view>
<!--在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--使用boll类型当属性 checked
 字符串和花括号之间不要存在空格，否则会导致识别失败
-->
<checkbox checked="{{isChecked}}"></checkbox>

运算

<!--加减-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<!-- 三元表达式-->
<view>{{10%2===0?"偶数":"奇数"}}</view>

列表渲染

wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
wx:key=“唯一的值” 用来提高列表渲染的性能
1. wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
2. wx:key="*this" 就表示你的数组是一个普通的数组，" *this"表示是循环项
当出现数组的嵌套循环的时候，尤其要注意，不要重名
默认情况下，我们不写wx:for-item="item" wx:for-index="index"，小程序也会把循环项的名称和索引的名称 item和index

只有一层循环的话wx:for-item="item" wx:for-index="index"才可以省略‘
对象的循环，wx:for-item指向的是对象的值，wx:for-index指向的是对象的属性

项的变量名默认为item， wx:for-item可以指定数组当前元素的变量名

下标变量名默认为index，wx:for-index可以指定数组当前下标的变量名

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
    索引：{{index}}
        --
    值：{{item.name}}
    </view>
</view>

wx:key用来提高数据渲染的性能

wx:key绑定的值，有如下的选择

string类型，表示循环项的唯一属性

list:[{id: 0, name: "炒饭"}, {id: 1, name: "炒面"}]
wx.key="id";

<view>
  <view wx:for="{{list}}" wx:key="index" wx:for-item="item" >
    {{index}}---{{item.name}}
  </view>
</view>

保留字*this，它的意思是item本身，*this代表的必须是唯一的字符串和数组
```
list:[1, 2, 3, 4, 5]
wx:key="*this"
```

block标签

block在写代码的时候可以看见，但是运行代码的时候不会变成一个真正的dom元素——运行时，block标签消失，但是其他标签不受任何影响

用处：用来绑定循环

<block wx:for="{{list}}">
    <view>
        {{index}}---{{item.name}}
    </view>
</block>

条件渲染

wx:if

在框架中，使用wx:if"{{condition}}"来判断是否需要渲染该代码块

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

if成立执行，elif和else都不执行
if不成立，elif成立执行，else不执行
zhijieif和elif不成立，else执行

hidden

在标签上直接加入属性 hidden——标签直接隐藏
hidden="{{条件表达式}}"

<view hidden>11111</view>
<view hidden="{{true}}">22222</view>

区别及使用场合

当标签不是频繁地切换显示，优先使用wx-if

直接把标签从页面结构给移除掉
当标签频繁地切换显示的时候，优先使用hidden

通过添加样式的方式切换显示

标签：index,name,微信,语法,item,key,标签,模板,wx
来源： https://blog.csdn.net/qq_56303170/article/details/120425237

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序 模板语法