微信小程序视图层语法基础

WXML

• WXML的全称是WeiXin Markup Language（微信标记语言），类似于HTML也是一种使用<标签>和</标签>来构建页面结构的语言
• WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用的能力。

小程序视图层数据绑定语法

1.数据绑定——作用于页面内容

• 在WXML页面中可以使用双花括号{ {变量名}}的形式表示动态数据

//wxml
<view>{
  {msg}}</view>

//js
Page({
  data: {
    msg: '你好！'
  }
})

2.数据绑定——作用于组件属性

• 组件的属性也可以使用动态数据，例如组件的id、class等属性值

//wxml
<view id='{
  {id}}'>测试</view>

//js
Page({
  data: {
    id: 'myView'
  }
})

3.数据绑定——作用于控制组件

• 控制属性也可以使用动态数据，但必须在引号内

//wxml
<view wx:if='{
  {condition}}'>测试</view>

//js
Page({
  data: {
     condition: false
  }
})

4.数据绑定——关键字绑定

• 如果直接在引号内写布尔值也必须用双花括号括起来
• 注意不可以去掉双花括号直接写成wx:if=‘false’，此时false会被认为是一个字符串，转换为布尔值后表示true。

<view wx:if='{
  {false}}'>测试1</view>
<view wx:if='{
  {true}}'>测试2</view>

5.数据绑定——运算绑定

双花括号内部还可以进行简单的运算，支持的运算方式包括

• 三元运算
• 算数运算
• 逻辑判断
• 字符串运算
• 数据路径运算

<!--WXML页面代码-->
<view>{
  {object.key1}} {
  {array[1]}}</view> <!--显示的结果是：Hel