04-block标签

最新推荐文章于 2024-09-21 11:35:39 发布

林笙10

最新推荐文章于 2024-09-21 11:35:39 发布

阅读量592

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_46498227/article/details/117092816

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了小程序开发中WXML文件的基本语法，包括text、view、checkbox等标签的使用，以及数据绑定、条件渲染、列表循环等特性。通过实例展示了如何在WXML中进行字符串、数字、布尔值和对象类型的绑定，并解释了block标签的作用。同时，文章还涵盖了表达式运算和列表渲染的细节，帮助开发者更好地理解和运用小程序的前端结构。

摘要由CSDN通过智能技术生成

04-block标签

<!--pages/demo3/demo3.wxml-->
<!-- 
    1,text 相当于以前web中的  span标签  行内元素  不会换行
    2,view 相当于以前web中的  div标签  块级元素  会换行
    3,checkbox就是以前的复选框标签
 -->
<!-- <text>1</text>
<text>2</text>
<view>1</view>
<view>2</view> -->

<!-- 1,字符串 -->
<view>{{msg}}</view>
<!-- 2,数字类型 -->
<view>{{num}}</view>
<!-- 3,bool类型 -->
<view>{{isGirl}}</view>
<!--4,object类型  -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5,在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--
     6,使用bool类型充当属性 checked
       字符串和花括号之间一定不要存在空格，以下写法就是错误的示范
       <checkbox checked="       {{isChecked}}"></checkbox>
-->
<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>
<!-- 7，运算=>表达式
       1，可以在花括号中加入  表达式  --“语句”
       2，表达式
         指的是一些简单  运算  数字运算  字符串拼接 逻辑运算
           1，数字的加减
           2，字符串拼接
           3，三元表达式
       3，语句
         1 复杂的代码段
           1,if  else
           2,switch
           3,do while
           4,for
 -->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{10%2===0?'偶数':'奇数'}}</view>

<!-- 
     8，列表循环
       1，wx:for="{{数组或对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
       2, wx:key="唯一值 "用来提高列表渲染的性能
         1 wx:key 绑定一个普通的字符串的时候，那么这个字符串名称 肯定是 循环数组中的对象的唯一属性
         2 wx:key="*this" 就表示你的数组是一个普通的数组，*this表示是 循环项
           [1,2,3,44,5]
       3 当出现数组的嵌套循环时候，尤其要注意 以下绑定的名称不要重名
         wx:for-item="item"  wx:for-index="index"
       4 默认情况下，我们不写
        wx:for-item="item"  wx:for-index="index"
        小程序也会把循环项的名称和索引的名称item和index
        只有一层循环的话  wx:for-item="item"  wx:for-index="index" 可以省略
  -->
<view>
    数组循环
    <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
        索引：{{index}}
        --
        值：{{item.name}}
    </view>
</view>
<!-- 
    9，对象循环 
      1 wx:for="{{对象}}"  wx:for-item="对象的值"  wx:for-index="对象的属性"
      2 循环对象的时候 最好把item和index的值都修改以下
         wx:for="{{对象}}"  wx:for-item="value"  wx:for-index="key"
-->
<view>
    <view>对象循环</view>
    <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="name">
        属性：{{key}}
        --
        值：{{value}}
    </view>
</view>

<!--
   block标签
     1 占位符的标签
     2 写代码的时候 可以看到这标签的存在
     3 页面渲染 小程序会把他移除掉

 -->
 <view>
    数组循环
    <block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="mylist">
        索引：{{index}}
        --
        值：{{item.name}}
    </block>
</view>