原生小程序的基础知识1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72503508/article/details/129914494

本文介绍了小程序中模板语法的关键概念，包括使用双大括号进行数据绑定，input的双向数据绑定特性，wx:for实现列表渲染，wx:if和hidden进行条件渲染，以及block的使用。详细阐述了如何在小程序开发中实现视图和数据的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、模板语法

1. 数据的绑定

1.1 小程序是通过双大括号来实现数据的绑定

<view class="msg">{{msg}}</view>
<!-- 重点注意，属性的绑定也是 {{}} -->
<input name="number" value="{{msg}}" />

1.2 input 的双向数据绑定 model:value = "{{xxx}}"

<input name="number" model:value="{{msg}}" />

2. 列表的渲染

1.1 data 中的数据要通过 wx:for ,实现循环渲染，其中，默认index 为索引，item 为每一项，里面的 key，不需要插值，如果是循环的数据里面有id 则直接写 id，没有即遍历的的简单数据类型则写 "*this"为key 的值

  <view  
    wx:for-index="key" 
    wx:for-item="student"
    class="item" 
    wx:for="{{students}}" 
    wx:key="id">
       <text>{{index + 1}}</text>
       <text>{{item.name}}</text>
       <text>{{item.age}}</text>
       <text>{{item.gender}}</text>
  </view>

通过 wx:for-index/wx:for-item 可以自定义索引值与单元值

3. 条件渲染

1. 通过 wx:if 来实现条件渲染，还有一个 hidden 也可以实现条件渲染，两者的区别相当于v-if 与 v-show的区别

<view wx:if="{{true}}">{{msg}}</view>
<view wx:else>{{msg}}</view>
<view hidden="{{true}}">{{msg}}</view>

4. block 幽灵节点此节点不会被渲染到页面中。