(五)WXML 语法

视频链接:尚硅谷2024最新版微信小程序

声明和绑定数据

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

在将数据声明好以后,在 WXML 使用 **Mustache 语法(双大括号 { { }})**将变量包起来,从而将数据绑定

在 { { }} 内部可以做一些简单的运算,支持如下几种方式:

  1. 算数运算
  2. 三元运算
  3. 逻辑判断
  4. 其他…
    📌 注意事项:在 { { }} 语法中,只能写表达式,不能写语句,也不能调用 js 相关的方法
    [官方文档:wxml 语法]

setData() 修改数据

小程序中修改数据不推荐通过赋值的方式进行修改,通过赋值的方式修改数据无法改变页面的数据

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

setData() 方法有两个作用:

  1. 更新数据
  2. 驱动视图更新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WXML 和 WXSS 是微信小程序中的两种重要的文件类型,WXML负责小程序页面结构的描述,WXSS负责小程序页面样式的定义,下面是WXML和WXSS的基本语法: ### WXML基本语法 1. 基本结构:WXML文件以`<view>`标签为根节点,描述小程序页面的结构。 2. 标签属性:WXML标签可以具有多个属性,如`class`、`style`、`id`、`data-*`等,可以通过这些属性来实现样式和交互的控制。 3. 数据绑定:WXML支持数据绑定,可以通过`{{}}`来绑定变量和表达式,实现动态的内容展示和交互效果。 4. 条件渲染:WXML支持条件渲染,可以使用`wx:if`、`wx:else-if`和`wx:else`等指令来控制节点的显示和隐藏。 5. 列表渲染:WXML支持列表渲染,可以使用`wx:for`指令来对数组或对象进行遍历和渲染。 ### WXSS基本语法 1. 选择器:WXSS采用CSS选择器的语法,可以使用类选择器、ID选择器、标签选择器等来选择页面元素。 2. 样式属性:WXSS支持CSS中的大部分样式属性,如颜色、字体、大小、边框、背景等,可以通过这些属性来实现页面样式的定义。 3. 样式继承:WXSS支持样式继承,可以通过`inherit`关键字来继承父节点的样式。 4. 样式导入:WXSS支持样式导入,可以使用`@import`关键字来导入其他的WXSS文件。 5. 样式层叠:WXSS采用CSS样式层叠的规则,可以通过样式的优先级和继承关系来决定节点最终的样式效果。 以上是WXML和WXSS的基本语法,开发者可以根据需求和经验来使用这些语法,实现小程序页面的结构和样式的定义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值