WXML模板语法

我们所要学习的WXML模板语法有五种：

1.数据绑定 2.事件绑定与事件传参 3.条件渲染 4.列表渲染

1.数据绑定

数据绑定的基本原则：

1.在data中定义数据

2.在WXML中使用数据

定义数据和使用数据类似于VUE，如果学习过VUE再学习小程序就会比较容易

1.在data中定义数据

在data区域以key,value的形式就可以绑定数据了，用逗号分隔

Page({
    data: {
        // 定义的字符串数据类型
        wd:"ssa",
        // 定义的整数类型
        a:1
    },
})

2.在WXML中使用数据

使用js中定义的数据需要用到Mustache语法(双大括号)才能在WXML中使用，Mustache语法类似于VUE中的插值表达式

<view>{
  { 需要插入的数据 }}</view>

3.动态绑定属性

与vue不同的是，WXML动态绑定属性的属性值也需要使用Mustache语法

页面数据：

Page({
    data: {
        img:"/images/1.png"
    },
})

页面结构：

<image src="{
  {img}}"></image>

4.三元运算

页面数据：

Page({
    data:{
        randomNum : Math.random()+10  //生成10以内的随机数
    }
})

页面结构：

<view>{
  { randomNum >=5? "随机数字大于或等于5"&