小程序笔记5WXML模板语法（详细含有代码）

目录

（一）数据绑定

数据绑定的基本原则

在data中定义页面的数据

 Mustache语法的格式

Mustache语法的应用场景

动态绑定内容

动态绑定属性

三元运算

算数运算

（二）事件绑定

 什么是事件​

小程序中常用的事件

事件对象的属性列表

 target和currentTarget的区别

 bindtap的语法格式

 在事件处理函数为data中数据赋值

事件传参

bindinput的语法格式 

 实现文本框和data之间的数据同步

（三）条件渲染

wx：if

 结合使用wx：if

 hidden

 (四）列表渲染

wx：for

 手动指定索引和当前项的变量名

 wx：key的使用​

如果觉得好的就点赞以下把！！！

---

（一）数据绑定

• 数据绑定的基本原则

• 在data中定义页面的数据

•  Mustache语法的格式

• Mustache语法的应用场景

 

• 动态绑定内容

 

<view>{{info}}</view>

  data: {
    info:'helloword',
    
  },

• 动态绑定属性

<image src="{{imgSrc}}" mode="heightFix"></image>

   imgSrc:"https://tse3-mm.cn.bing.net/th/id/OIP-C.B6pZ8N_dG3MNAYppM-zX0AHaEo?pid=ImgDet&rs=1"

• 三元运算

 

<view>{{randomNum1 >= 5 ? '数字大于或等于5' :'数据小于等于5' }}</view>

    randomNum1:Math.random()*10

 

• 算数运算

（二）事件绑定

•  什么是事件

• 小程序中常用的事件

• 事件对象的属性列表

•  target和currentTarget的区别

 

•  bindtap的语法格式

 // 定义按钮事件处理函数
  btnTapHandler(e) {
    console.log(e) //事件参数对象
  },

•  在事件处理函数为data中数据赋值

• 事件传参

 

• bindinput的语法格式 

 

•  实现文本框和data之间的数据同步

 

（三）条件渲染

• wx：if

<!-- == 用于比较两者是否相等，忽略数据类型。
=== 用于更严谨的比较，值和值的数据类型都需要同时比较。 -->
<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type ===2}}">女</view>
<view wx:else>保密</view>

•  结合<block>使用wx：if

•  hidden

 

 (四）列表渲染

• wx：for

<!-- 列表渲染 -->
<view wx:for="{{arr1}}">
索引是{{index}}，item项是{{item}}
</view>

•  手动指定索引和当前项的变量名

•  wx：key的使用

 如果报以下的错误就加一下：wx：key

如果觉得好的就点赞以下把！！！