微信小程序（二）--- wxml语法

此处只列举了一些常用的语法
具体可查阅 微信小程序开放文档

1、运算 => 表达式

 <!-- 算数运算 -->
<view>{{1 + 1}}</view>
<!-- 字符串拼接 -->
<view>{{'1' + '1'}}</view>
<!-- 三元表达式 -->
<view>{{10 % 2 === 0 ? '偶数' : '奇数'}}</view>

2、列表循环 wx:for

2.1、数组循环

1. 语法：wx:for="{{数组或者对象}}" wx:for-item="循环的名称" wx:for-index="循环项的索引"
2. 绑定一个 wx:key提高列表渲染的性能

2.1 wx:key="*this"就表示 你的数组 是一个普通的数组 *this 表示是 循环项 [1,2,3]

3. 不写 wx:for-item 和 wx:-index也会默认 名称为 item 索引为 index

<!-- 8 列表循环 -->
<view>
  <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
    索引： {{index}}
    --
    值：{{item.name}}
  </view>
</view>

2.2、对象循环

1. 语法：wx:for="{{数组或者对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"

<!-- 9 对象循环 -->
<view>
  <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="*this">
    属性：{{key}}
    --
    值：{{value}}
  </view>
</view>

3、条件渲染wx:if

3.1、wx:if

语法：wx:if="{{true/false}}"

​ wx:elif="{{true/false}}"

​ wx:else

<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

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

3.2、hidden

语法：1、直接在属性加上 hidden ，隐藏

​ 2、hidden="{{true}}"

<view hidden>hidden</view>   // 隐藏
<view hidden="{{true}}">hidden</view>  // 隐藏
<view hidden="{{false}}">hidden</view>  // 显示

3.3、适用场景

1、不频繁切换显示，使用 wx:if，类似 vue 的 v-if

2、频繁显示，使用 hidden， 类似 vue 的 v-show

4、事件绑定

4.1、事件绑定关键词 bind

<input type="text" bindinput="handleInput"/>
<!-- 
  1、输入事件：bandinput
  2、点击事件：bandtap
 -->

4.2、绑定事件传参

注意一：无法在小程序当中的 事件中 直接传参

注意二：通过自定义属性的方式获取参数

<!--
错误的方式
<button bindtap="handletap(1)">+</button>
<button bindtap="handletap(-1)">-</button>
-->

<!-- 正确的方式 -->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

// 获取参数
	// 加减按钮事件
      handletap(e) {
        // 获取自定义属性 operation
        const operation = e.currentTarget.dataset.operation
        this.setData({
          num: parseFloat(this.data.num) + operation
        })
      }
    })

4.3、如何修改 data 的值

this.setData({
	数据名：新数据
})

 // 输入框的input事件
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  }