小程序--模板语法

一、插值{{}}语法

1、内容绑定

html 复制代码
<view>{{iptValue}}</view>

2、属性绑定

html 复制代码
<switch checked="{{true}}" />
javascript 复制代码
Page({
    data: {
        iptValue: '123'
    }
})

二、简易双向数据绑定

model:value:支持双向数据绑定

注:仅input和textarea支持,qie只支持data的一级数据,不支持对象格式的数据绑定

html 复制代码
<input type="text" placeholder="请输入内容" model:value='{{iptValue}}'/>

三、条件渲染

1、条件渲染--wx:if & wx:else

wx:if & wx:else相当于vue中的v-if & v-else;wx:else不可单独使用,需跟在wx:if后使用。

html 复制代码
<view class="welcome">
  <text wx:if="{{ isLogin }}">大师兄</text>
  <text wx:else>游客</text>你好:
</view>
javascript 复制代码
  data: {
    isLogin: true,
  }

2、条件渲染--hidden

hidden相当于vue中的v-show,当hidden属性值为true时,页面显示,反之,则不显示。

html 复制代码
<view class="loading">
  <text hidden="{{ !loaded }}">正在加载...</text>
</view>
javascript 复制代码
  data: {
    loaded: true
  }

四、列表渲染

1、wx:for循环列表

默认index和item是数组访问变量(index是索引,item是数组项)。

注意:wx:key未指定值会有警告,使用时不使用插值语法,访问对象为对象时,只用写属性名。

html 复制代码
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
    <text>级别</text>
  </view>
  <view class="item" wx:for="{{students}}" wx:key="id">
    <text>{{item.id}}-{{index}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
    <text>{{item.level}}</text>
  </view>
</view>
javascript 复制代码
data: {
    students: [
      { id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟' },
      { id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟' },
      { id: 3, name: '常超', age: 20, gender: '女', level: '老鸟' },
    ],
  }

2、wx:for循环简单数组

注意:wx:key未指定值会有警告,使用时不使用插值语法,访问对象为简单单元时,使用"*this"

html 复制代码
<view class="history">
  <text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>
javascript 复制代码
data: {
    history: ['苹果', '华为', 'OPPO', '三星'],
  }

3、wx:for 的item和index改名

wx:for 嵌套时 item 和 index需要修改名称,防止命名重复,取值错误。

语法:wx:for-item='名称'

wx:for-index='名称'

html 复制代码
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
    <text>级别</text>
  </view>
  <view class="item" wx:for="{{students}}" wx:key="id" wx:for-item='stu' wx:for-index='idx'>
    <text>{{stu.id}}-{{idx}}</text>
    <text>{{stu.name}}</text>
    <text>{{stu.age}}</text>
    <text>{{stu.gender}}</text>
    <text>{{stu.level}}</text>
  </view>
</view>
相关推荐
浩星8 分钟前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱10 分钟前
element plus 多个form校验
前端
yume_sibai19 分钟前
HTML HTML基础(3)
前端·html
米花丶26 分钟前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军1 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭2 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter