[小程序开发] wxml语法

一、声明和绑定数据

小程序中使用的数据均需要在Page()方法的data对象中进行声明定义。

在WXML使用Mustache语法(双大括号{{ }})将变量包起来,从而进行数据绑定。

在{{ }}语法中,只能写表达式,不能写语句,也不能调用js相关的语法。

html 复制代码
<!-- 展示数据 -->
<view>{{ name }}</view>
html 复制代码
<!-- 绑定属性值 -->
<checkbox checked="{{true}}"/>

二、修改数据

通过调用setData()方法进行修改,setData()接收对象作为参数,key是需要修改的数据,value是最新的值。

setDate()方法作用:

1、更新数据

2、驱动视图更新

不推荐使用赋值的方法进行修改,通过赋值的方式修改数据无法改变页面的数据。

  • 修改/新增
javascript 复制代码
this.setData({
            //如果对象新增属性,可以将key写成数据路径的方式
            'userInfo.name':"tom",
            'userInfo.age':10
        })

简化新增和修改,使用ES6提供的展开运算符或Object.assign()方法 。

javascript 复制代码
         //ES6提供的展开运算符...
        //通过展开运算符能够将对象中的属性复制给另一个对象,后面的属性会覆盖前面的属性
        const userInfo={
            ...this.data.userInfo,
            name:"jerry",
            age:18
         }
        this.setData({userInfo:userInfo}) //键和值一样可简写为this.setData({userInfo})
javascript 复制代码
        //Object.assign()方法
        //将多个对象合并为一个对象
        const userInfo=Object.assign(this.data.userInfo,{name:"tom"},{age:18})
        this.setData({userInfo:userInfo})//键和值一样可简写为this.setData({userInfo})
  • 删除
javascript 复制代码
        //删除单个属性
        delete this.data.userInfo.age
        this.setData({
            userInfo:this.data.userInfo
        })
        //删除多个属性,可以使用ES6提供的rest剩余参数
        const{name,age,...rest}=this.data.userInfo
        this.setData({
            userInfo:rest
        })

三、修改数组类型数据

  • 新增
javascript 复制代码
updateList(){
        // 新增数组元素
        // push方法
        this.data.list.push(6)
        this.setData({list:this.data.list})
        // concat方法
        const newList=this.data.list.concat(7)
        this.setData({list:newList})
        // 使用展开运算符
        const newList=[...this.data.list,8]
        this.setData({list:newList})
    }
  • 修改
javascript 复制代码
        // 修改数组元素
        //方法一
        this.setData({"list[1]":6})
        //方法二
        this.setData({"list[0].name":"jerry"})
  • 删除
javascript 复制代码
        // 删除数组元素
        // 方法一
        this.data.list.splice(1,2)
        this.setData({list:this.data.list})
        //方法二
        const newList=this.data.list.filter(item=> item!==2)
        this.setData({list:newList})

四、双向数据绑定

即用户输入的数据可以改变页面,在对应属性之前添加model**:**前缀。

html 复制代码
<!-- 数据单向绑定,数据能够影响页面,但是页面更新不会影响到数据 -->
<input type="text" value="{{value}}"/>

<!-- 数据双向绑定,数据能够影响页面,页面更新也会影响到数据 -->
<!-- 添加model:属性 -->
<input type="text" model:value="{{value}}"/>

五、列表渲染

通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上。可通过使用wx.for属性绑定一个数组或对象,可使用每一项数据重复渲染当前组件,每一项的变量名默认为item,下标变量名默认为index。

html 复制代码
<!-- 渲染数组,item:数组的每一项,index:下标 -->
<view wx:for="{{numList}}">{{item}}-{{index}}</view>
<!-- 渲染对象,item:对象属性的值,index:对象属性 -->
<view wx:for="{{obj}}">{{item}}-{{index}}</view>

使用wx.for遍历时,建议加上wx:key属性,添加wx:key属性值时,不需要使用双大括号语法,直接使用遍历的array中item的某个属性。

wx.key的值以两种形式提供:

1、字符串:代表需要遍历的array中item的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变。

2、保留关键字*this代表在for循环中的item本身,当item本身是一个唯一的字符串或数字时可以使用。

html 复制代码
<!-- wx:key两种添加方式 -->
<!-- 方式1,写成字符串,需要是遍历的数组中item的某个属性,要求该属性是列表中唯一的字符串或数字,不能进行动态改变。 -->
<view wx:for="{{fruitList}}" wx:key="id">{{item.name}}</view>
<!-- 方式2,保留关键字*this,*this代表的是item本身,item本身是唯一的字符串或数字。 -->
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>

六、更改默认的变量名和下标

可以使用wx:for-item和wx:for-index对默认的变量名和下标进行更改。

  • 使用wx:for-item可以指定数组当前元素的变量名
  • 使用wx:for-index可以指定数组当前下标的变量名
html 复制代码
<!-- 更改默认的变量名和下标(数组) -->
<view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
	{{fruitIndex}}-{{fruitItem.name}}
</view>
<!-- 更改默认的变量名和下标(对象) -->
<view wx:for="{{obj}}" wx:key="index" wx:key="id" wx:for-item="value" wx:for-index="key">	
	{{key}}-{{value}}
</view>

七、渲染一个包含多个节点的结构块

在<block/>标签上使用wx:for。

  • <block/>并不是一个组件,仅是一个包装元素,不会在页面上做任何渲染,只接受控制属性(可以在页面中展示,但是在调试器WXML中不展示)
  • <block/>在wxml中可用于组织代码结构,支持列表渲染、条件渲染等。
html 复制代码
<block wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
	<view >名字:{{fruitItem.name}}</view>
	<view>价格:{{fruitItem.price}}</view>
</block>

八、条件渲染

主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式:

1、使用wx:if 、wx:elif、wx:else属性组

html 复制代码
<view wx:if="{{num===1}}">num等于{{num}}</view>
<view wx:elif="{{num===2}}">num等于{{num}}</view>
<view wx:else>num大于2,num等于{{num}}</view>

2、使用hidden属性

html 复制代码
<!-- 定义isFlag为true -->
<view hidden="{{ !isFlag }}">如果isFlag是true则展示结构,否则隐藏结构</view>

两者区别:

1、wx:if:当条件为true时将结构展示出来,否则结构不会进行展示,通过移除/新增节点的方式实现。

2、hidden:当条件为true时会将结构隐藏,否则结构会展示出来,通过display样式属性来实现(display:none)。

相关推荐
阿伟来咯~11 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端16 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱19 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai28 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨29 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js