微信小程序开发（五）wxml基本语法

---

本篇文章，带大家来了解一下，wxml基本语法，与html相同的部分就不说了，默认你已掌握了，如果没有掌握，那就先去学学，或者留言，我给你点资料。

wxml语法帮助文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

1.数据绑定

WXML 中的动态数据来自对应 Page 的 data设置，使用 Mustache 语法，即双大括号模式

{
  {变量名}}

来个示例：在index.wxml键入如下代码：

<view>{
  {test}}</view>

在index.js中键入如下代码：

Page({
   
    data: {
   
        test: '老杨学堂'
    }
})

保存，即可在模拟器中看到显示 老杨学堂 这几个字，如图示：

太简单了是吧，只要格式写对，括号没有问题，那就没有问题。

但这有何意义？在wxml页面直接写 “老杨学堂”几个字不香吗？为什么还要费用做数据绑定。这是因为，数据绑定技术，将js业务逻辑数据通过数据绑定显示到wxml页面，实现了动态数据，将来我们无论是网络获取的数据还是用户输入的数据，都将通过这种方式进行数据传递，实现动态交互。

数据绑定也可以是表达式

在index.wxml文件中键入

<view>{
  {age+10<30?'成家立业':'自由活动'}}</view>

在index.js文件中键入：

Page({
   
    data: {
   
        test: '老杨学堂',
        age:22
    }
}