【微信小程序】-- WXML 模板语法 - 数据绑定(九)

简介: 【微信小程序】-- WXML 模板语法 - 数据绑定(九)



一、数据绑定的基本原则

  前面已经介绍完了小程序的一些常用组件,剩下组件的讲解会在后续讲解。不过接下来先来讲解一下WXML模板语法,让我们原文再续,书接上回。

1、数据绑定的基本原则

  之前学过 Vue 的都知道 Vue 语法里也有数据绑定这个概念,而 WXML 里的数据绑定也是跟他类似的,也可以实现数据的单向或双向绑定。 数据绑定的基本原则有两点:

  • 在JS文件中的data中定义数据;
  • 页面的wxml文件中使用数据;

  基本上就是在 JS 端操作数据,WXML 端进行绑定并显示,其中 WXML 中的动态数据均来自对应 Pagedata。下面就来讲解一下怎么实现这个数据绑定的过程。

2、在data中定义页面的数据

  在页面对应的 .js 文件中,前面讲到了 WXML 的动态数据来自于 JS 端中的 data 对象,所以把数据定义到 data 对象中即可;

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 字符串类型的数据
    info: 'Nice 十连双黄',
  },
})

3、Mustache语法的格式

  把data中的数据绑定到页面中渲染,使用 Mustache 语法(简单点就两大括号)将变量包起来即可。语法格式为

<view>{{info}}</view>

  也可以称为插值表达式,自此,就可以在页面动态控制显示的数据,效果如下所示:

二、应用场景

   Mustache 语法的主要应用场景如下:绑定内容、绑定属性、运算(三元运算、算术运算等);

1、绑定内容

  上面刚刚讲解的栗子就是动态绑定内容,这里还是简单讲一下具体结构吧:

cshPageData.js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 字符串类型的数据
    info: 'Nice 十连双黄',
  },
})

cshPageData.wxml:

<view>{{info}}</view>

  运行结果就不做展示了。

2、绑定属性

  除了可以动态绑定内容以外,还可以绑定组件中的属性,这里就以 image 组件为例来讲解。

cshPageData.js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 字符串类型的数据
    info: 'Nice 十连双黄',
    // 图片路径
    imgSrc: '/images/cshTest2.jpg'
  },
})

cshPageData.wxml:

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>

这样就实现了动态绑定属性了。

3、运算

  Mustache 语法中还可以进行运算,也就是在 WXML中获取到 JS 端的数据时,可以对其进行运算在显示或者做判断。 比如常见的三元运算和算术运算。

  • 三元运算

  语法结构:表达式1 ? 表达式2 :表达式3,接下来可以来围绕着当前数是否大于等于50来讲解来该操作;

cshPageData.js:

  使用 Math.random() 函数来随机生成0到99的数;

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 生成随机数
  randomNum: Math.random() * 100
  },
})

cshPageData.wxml:

   在WXML 处理数据;

<view>{{randomNum >= 50 ? '当前数大于等于50' : '当前数小于50'}}</view>
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>

   可以来看一下效果:

  • 算术运算

  在WXML中对数据进行算术运算更加方便地实现数据的操控输出。

cshPageData.js:

  使用 Math.random() 函数来随机生成0到99的数;

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 生成随机数
  randomNum: Math.random() * 100
  },
})

cshPageData.wxml:

   在WXML 处理数据;

<view>生成100以内的随机数:{{randomNum}}</view>
<view>{{randomNum >= 50 ? '当前数大于等于50' : '当前数小于50'}}</view>
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>

   可以来看一下效果:


总结

  感谢观看,这里就是WXML 模板语法 - 数据绑定的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
3月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
49 1
|
4月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
4月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
5月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
5月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
6月前
|
JavaScript
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
6月前
|
小程序
【微信小程序-原生开发】wxml 支持 includes (wxml中执行函数的方法)
【微信小程序-原生开发】wxml 支持 includes (wxml中执行函数的方法)
361 0
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
810 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
839 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
198 7
下一篇
开通oss服务