前端【小程序】08-小程序基础篇【WXML语法】【数据绑定】【列表渲染】【条件渲染】

　　WXML语法官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

数据绑定

　　插值 {{ }} 语法：
　　　　• 内容绑定
　　　　• 属性绑定

1 <!-- 花括号{{}} 和 引号 "" 之间 不可以留多余的空格字符串 -->
2 <switch checked="{{ true }}" bindchange="swithChange"/>
3 
4 <!-- checked根据 switchStatus 属性来赋值-->
5 <switch checked="{{ switchStatus }}" bindchange="swithChange"/>

　　小程序中使用双花括号实现数据与模板的绑定，与 Vue 中不同的是无论是内容绑定还是属性绑定都使用双花括号

1 <!-- 内容绑定 -->
2 <view>{{ 1 + 1 }}</view>
3 <!-- 属性绑定 -->
4 <switch checked="{{ false }}" />
5 <!-- 此处是字符串的 "false"，最终导致 Boolean("false") 布尔结果为 true -->
6 <switch checked="false" />
7 <!-- 此处是 false + " "，最终导致 Boolean("false ") 布尔结果为 true -->
8 <switch checked="{{ false }} " />

　　简易双向绑定：小程序中提供了 model:value="" 语法来实现双向的数据绑定，但是目前只能用在 input 和 textarea 组件中

1 <!-- index.wxml
2   model:value
3   简易双向绑定,只支持data中第一级数据，
4   ps:忽略双向绑定控制台的警告                                                                        
5  -->
6  <input type="text" placeholder="请输入姓名" model:value="{{msg}}"/>
7 <!-- 简易双向绑定 不支持 form.name -->
8  <input type="text" placeholder="请输入姓名" model:value="{{form.name}}"/>
// pages/render/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:'王力宏',
    form:{
      name:'哈哈哈'
    }
    },
})

屏蔽双向绑定输入警告

1 <!-- 绑定一个空的函数 -->
2 <input type="text" model:value="{{ keyword }}"  bindinput="empty"/>
3 
4 
5 Page({
6    // 函数就是空的，不要内容
7     empty() {}
8 })

 

列表渲染

  • wx:for 根据数组重复渲染组件内容
    • index 默认值，访问数组的索引值
    • item 默认值，访问数组的单元值
  • wx:key 列表项的唯一标识符（不使用 ）
    • 数组单元是对象时，只需要写属性名
    • 数组单元是简单类型时，推荐使用 *this
  • wx:for-index 自定义访问数组索引的变量名
  • wx:for-item 自定义访问数组单元的变量名
 1 <!-- 列表渲染 -->
 2 <view class="students">
 3   <view class="item">
 4     <text>序号 </text>
 5     <text>姓名 </text>
 6     <text>年龄 </text>
 7     <text>性别 </text>
 8     <text>级别 </text>
 9   </view>
10   <!-- wx:for = "{{students}}" 
11   　　　　item 循环项
12   　　　　index 循环下标
13 　　　　  相当于:v-for="(item,index) in students"
14   -->
15 
16   <!-- 使用列表渲染的默认单元值和索引值：index和item -->
17   <view class="item" wx:for="{{students}}" wx:key="id">
18     <text>{{index}} </text>
19     <text>{{item.name}} </text>
20     <text>{{item.age}} </text>
21     <text>{{item.gender}} </text>
22     <text>{{item.level}}</text>
23   </view>
24 
25   <!-- 使用wx:for-item="stu"指定单元值别名  wx:for-index="idx"指定索引值别名，适用于wx:for嵌套的时候 -->
26   <view class="item" wx:for="{{students}}" wx:key="id" wx:for-item="stu" wx:for-index="idx">
27     <text>{{idx}} </text>
28     <text>{{stu.name}} </text>
29     <text>{{stu.age}} </text>
30     <text>{{stu.gender}} </text>
31     <text>{{stu.level}}</text>
32   </view>
33 </view>
34 
35 <!-- 简单数组 -->
36 <view class="history">
37   <text wx:for="{{history}}" wx:key="item">{{item}}</text>
38 </view>
 1 // pages/render/index.js
 2 Page({
 3 
 4   /**
 5    * 页面的初始数据
 6    */
 7   data: {
 8     students: [
 9       { id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟' },
10       { id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟' },
11       { id: 3, name: '常超', age: 20, gender: '女', level: '老鸟' },
12     ],
13     history: ['苹果', '华为', 'OPPO', '三星']
14    }
15 }) 

样式index.wxss

 1 .students {
 2   padding: 0 20rpx;
 3   margin-top: 20rpx;
 4   border-radius: 10rpx;
 5   background-color: #fff;
 6 }
 7 
 8 .students .item {
 9   display: flex;
10   justify-content: space-between;
11   height: 44rpx;
12   padding: 20rpx 0;
13   border-bottom: 1rpx solid #eee;
14 }
15 
16 .students .item:last-child {
17   border: none;
18 }
19 
20 .students .item text {
21   flex: 1;
22   text-align: center;
23 }
24 
25 .history {
26   margin-top: 20rpx;
27   padding: 30rpx 20rpx;
28   border-radius: 10rpx;
29   background-color: #fff;
30 }
31 
32 .history text {
33   margin-right: 20rpx;
34   margin-top: 20rpx;
35   padding: 8rpx 28rpx;
36   border-radius: 50rpx;
37   background-color: #f7f6f7;
38   font-size: 28rpx;
39 }

条件渲染

  • 控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
    • wx:if 根据表达式的值渲染内容，值为真时显示
    • wx:else 用在 wx:else 的后面，不可单独使用，wx:if 表达式值为假时显示
  • 组件属性：
    • hidden 根据表达式的值渲染内容，值为真时隐藏
    • 通过 [hidden] { display: none; } 来实现内容的隐藏
 1 <!-- index.wxml
 2   wx:if  相当于vue的 v-if
 3   wx:if  小程序绑定数据需要写 {{}}
 4   小程序没有 v-show 但是有 hidden 属性负责隐藏
 5  -->
 6 <!-- 条件渲染 wx:if 和 wx:else -->
 7 <view class="welcome">
 8   <text wx:if="{{ isLogin }}">大师兄</text>
 9   <text wx:else>游客</text>你好:
10 </view>
11 
12 <!-- 条件渲染 hidden -->
13 <view class="loading">
14   <!-- 可以单独使用 -->
15   <!-- <text wx:if="{{ !loaded }}">正在加载...</text> -->
16   <text hidden="{{ loaded }}">正在加载...</text>
17 </view>
// pages/render/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isLogin:true,
    loaded:false
    }
})

 

模板

 

 

 

 

引用

 

posted @ 2024-04-18 14:23  为你编程  阅读(26)  评论(0)  编辑  收藏  举报