携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列十篇：关于微信小程序的模板语法

模板语法

小程序原生框架 单向数据流

数据绑定

1. 在js文件中定义好数据
2. 在wxml中使用这些数据

普通数据的显示

  data: {
    msg: "各个国家有各个国家的国歌",
    num: 100,
    isBoy: true,
    person: {
      name: "富婆",
      age: "88",
      height: 100,
      weight: 300
    }
  }

<view> 1- 数据绑定 </view>
  <!-- 字符串 -->
  <view>{{msg}}</view>
  <!-- 数字 -->
  <view>数字:{{num}}</view>
  <!-- bool类型 -->
  <view>bool: {{isBoy}}</view>
  <!-- 对象 -->
  <view>对象：{{person.name}}</view>
  <!-- null undefined NaN -->
  <view>null: {{null}}</view>
  <view>undefined: {{undefined}}</view>
  <view>NaN: {{NaN}}</view>

小结

当变量充当属性的时候 " 和 { 之间不要出现空格

        <checkbox  checked="   {{false}}"></checkbox>

以下的这些值 转为bool类型都是等于false

    false 0  null undefined '' NaN

数组循环

1. wx:for="{{要循环的数据}}"

2. wx:for-index="index"

3. wx:for-item="item"

4. wx:key

           1 字符串  wx:key="id"  绑定的值 必须是 循化项的唯一的属性
           2 wx:key="*this"   普通数组的时候 [1,3,4,5,5,3] 或者 ['3','dd','dffdf']
             wx:key="{{item}}" 不行
   

对象循环

对象循环的时候 index 和 item 代表的含义不一样 最好自己 重命名

1. index => 属性名
2. item => 属性值

block标签

不是以前的vue中 template标签的用法类似

写代码的时候可以正常使用，但是最终页面渲染了 这个标签不会存在 ！！！

条件渲染

wx:if

通过 删除标签节点来实现隐藏

      <text wx:if="{{false}}" >1 😭</text>
      <text wx:elif="{{false}}" >2 🙁</text>
      <text wx:else >3 😊</text>

hidden

通过 控制 样式 来实现标签隐藏

hidden和display一起使用的时候 容易导致 hidden 失效

以上就是关于微信小程序的模板语法，其实还是比较好学习的的~~