微信模板语法

微信模板语法

科技前沿 • 2025-02-14 22:49 • 阅读 66

大家好，我是讯享网，很高兴认识大家。

微信属性

数据绑定
1. 在js文件里的data中写入数据
```
Page({ 
        /页面的初始数据 */ data: { 
        msg:"Hello", num:1000, isCheck:true }, }) 
```
  讯享网
2. 在wxml文件中渲染data中的数据<view>{ {msg}}</view>
3. 属性绑定<checkbox checked="{ {isChecked}}"></checkbox>
运算（表达式）
1. <view>{ {这里可以写表达式}}</view>

列表渲染

讯享网

属性
- wx:for="{ {数组或对象}}"
- wx:for-item="自定义循环项的名称"
- wx:for-index="循环项的索引"
- wx:key="唯一值"
  - wx:key="*this"表示你的循环项是普通数组
    - 普通数组：[1,2,3,4]
一层循环可以省略wx:for-item和wx:for-index两个属性

代码

讯享网//数据 Page({ 
        /页面的初始数据 */ data: { 
        list:[ { 
        id:0, name:"zhangsan" }, { 
        id:1, name:"lisi" }, ], boj:{ 
        name:'zahngshanaaa', age:10, a:'q' } }, })

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

循环对象

讯享网 <view> <view>循环对象</view> <view wx:for="{ 
        {boj}}" wx:key="age"> 对象名称{ 
      
        
      {index}} 对象值{ 
      
        
      {item}} </view> </view>

条件渲染
1. wx:if="{ {条件}}"
  - 实现if，else, if
  - 微信语法
    - wx:elif="{ {条件}}"
    - wx:else
  直接把标签从dom移除掉
2. hidden="{ {条件}}"
  -> 通过添加样式的方法来控制是否显示的
3. 什么场景使用哪个
  - 当标签不是频繁切换时使用wx:if
  - 当标签频繁切换时使用hidden

微信模板语法

微信模板语法

标签

微信属性

相关推荐