零基础学习微信小程序(4):模板语法

数据绑定:

view标签和text标签
在wxml里可以写入view标签和text标签
text标签相当于html里的span标签,是行内元素,写入时,不会进行换行
view标签相当于html里的div标签,是块级元素,写入时,会导致换行

<!--pages/demo03/demo03.wxml-->
<text>1</text>
<text>2</text>
<view>3</view>

在这里插入图片描述
在页面中插入字符串,数字,bool,object类型的数据:
此时如果直接在wxml的view标签里写入是不管用的。需要在js文件里写入数据的属性。

wxml文件:

<!--pages/demo03/demo03.wxml-->
<view>字符串:{{message}}</view>
<view>数字:{{num}}</view>
<view>布尔值:{{isRight}}</view>
<view>对象:{{Student.name}}</view>
<view>{{Student.ID}}</view>

js文件:

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:"Hello World",
    num:20,
    isRight:true,
    Student:{
      name:"咸鱼4号",
      ID:2012121,
    },
    isChecked:false
  }
})

在这里插入图片描述
数据在标签的属性中使用:

<view data-num="{{num}}">自定义属性</view>
<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>

在这里插入图片描述
同时应该注意的是在代码:

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

在双引号和花括号之间是不能加上空格的
错误写法:

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

此时会使复选框的出现选中的状态。

运算:

在wxml里的花括号里可以进行一些运算,例如:数字的加减乘除,字符串的拼接,一些逻辑运算等。

<!--数字运算-->
<view>{{1+1}}</view>
<!--字符串拼接-->
<view>{{'1'+'1'}}</view> 
<!--三元运算-->
<view>{{1>2?'false':'true'}}</view>
<!--逻辑判断-->
<view wx:if="{{3>5}}">1</view>
<view wx:else>2</view>

在这里插入图片描述
注意点:和以上是一样的双引号和花括号之间是不能有空格的,不然会被解析成字符串

列表渲染:

1、列表循环:wx-for
语法:
wx:for="{{数组或者对象}}"
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”
wx:key=“唯一的值”
项的名称默认为:item;wx:for-item可以指定数组当前元素的变量名
下标变量名默认为:index;wx:for-index可以指定数组当前下标的变量名
wx:key:用来提高数组的渲染的性能,可以保证每一个项的唯一性。绑定的值可以是string类型,也可以是*this类型。若为string类型,那么就表示循环项中的唯一属性;如果是保留字“*this”,它的意思就是item本身即循环项,*this代表的必须是唯一的字符串和数组。例如:[1,2,3],[‘1’,‘2’,‘3’]。

list:[
      {
        name:"张三",
        ID:20121
      },
      {
        name:"李四",
        ID:20122
      },
      {
        name:"王五",
        ID:20123
      }
    ]
<view>
    <view wx:for="{{list}}"
     wx:for-item="item"
     wx:for-index="index"
     wx:key="ID">
    索引:{{index}};
    姓名:{{item.name}}   学号:{{item.ID}}
    </view>
</view>
<view>
    <view wx:for="{{Student}}"
    wx:for-item="value"
    wx:for-index="key"
    wx:key="ID">
    属性:{{key}} 值:{{value}}
    </view>
</view>

在这里插入图片描述
注意点:
(1)在数组出现嵌套循环的时候,应该要注意绑定的名称不要重名:
wx:for-item=“item”   wx:for-index=“index”
(2)一般情况下,不写:
wx:for-item=“item”   wx:for-index=“index”

条件渲染:

可以使用wx:if=“{{istrue}}”来判断是否需要对代码块进行渲染

<view>
    <view wx:if="{{3>5}}">1</view>
    <view wx:elif="{{3==5}}">2</view>
    <view wx:else>3</view>
</view>

hidden:
类似于wx:if
以下的两种方式都是适用的:

<view >
    <view hidden>h1</view>
    <view hidden="{{true}}">h2</view>
</view>

在标签不是频繁的切换的时候,使用wx:if。因为它是直接把标签从页面结构上给移除掉的。
在标签频繁的切换显示的时候,优先使用hidden。因为它是通过添加样式的方式来切换显示的。(display:none)因为hidden属性是和display属性相关的,所以在使用hidden属性的时候,不能添加display属性
举个例子:

<view hidden style="display:flex">hidden</view>  

在这里虽然写了hidden,但是还是会在页面中出现hidden的字段。这是因为display:flex覆盖了hidden的属性:display:none。所以才会出现字。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章