微信小程序:5.数据绑定

  1. 在Data中定义数据
  2. 早wxml中进行数据使用

在data中定义数据

在页面对应的js对象中找到data,然后把数据进行定义即可

Page({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
    info:"我是定义的第一个数据"
  },

在wxml页面中进行数据的使用

使用mustache语法进行页面的使用,类似于vue的数据绑定

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

使用两个花括号进行数据的绑定填充

Mustache语法主要应用场景

  • 绑定内容
  • 绑定属性
  • 运算(三元运算符运算,和算数运算Mustache语法主要应用场)

内容绑定

在data中定义内容,然后在wxml中进行使用

属性绑定

<view>
  <image src="{{image}}" mode=""/>
</view>

内容运算

CleanShot 2024-04-19 at 09.50.05@2x.png

算数运算

CleanShot 2024-04-19 at 09.51.01@2x.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/578103.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客NC143 矩阵乘法【中等 矩阵 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/bf358c3ac73e491585943bac94e309b0 思路 矩阵算法在图像处理、神经网络、模式识别等领域有着广泛的用途。在矩阵乘法中&#xff0c;A矩阵和B矩阵可以做乘法运算必须满足A矩阵的列的数量等于B矩阵的行的数量。运算…

架构师系列- 消息中间件(12)-kafka基础

1、应用场景 1.1 kafka场景 Kafka最初是由LinkedIn公司采用Scala语言开发&#xff0c;基于ZooKeeper&#xff0c;现在已经捐献给了Apache基金会。目前Kafka已经定位为一个分布式流式处理平台&#xff0c;它以 高吞吐、可持久化、可水平扩展、支持流处理等多种特性而被广泛应用…

【docker】安装openjdk

查看可用的 openjdk版本 docker hub 查看地址&#xff1a;https://hub.docker.com/_/openjdk 此图片已被正式弃用&#xff0c;建议所有用户尽快找到并使用合适的替代品。其他官方形象替代品的一些例子&#xff08;按字母顺序列出&#xff0c;没有有意或暗示的偏好&#xff09;…

第三节课,后端登录【1】.2--本人

一、视频链接 网址&#xff1a; 后端用户脱敏和session-CSDN直播 二、代码开始 2.1 新建一个request参数。完成用户登录态键 快捷建&#xff0c; 全局变量 代码&#xff1a; // 3.记录用户的登录态/*** 这段代码是Java Web开发中的一部分&#xff0c;用于在会话&#xff08…

jdk版本冲突,java.lang.UnsupportedClassVersionError: JVMCFRE003

主要是编辑器所用的jdk版本和项目用的不一致导致的&#xff0c;虽然编译通过了&#xff0c;但是运行是会报错 选好后点击Apply点击ok&#xff0c;然后重新编译一遍项目就可以了

qml和c++结合使用

目录 文章简介1. 创建qml工程2. 创建一个类和qml文件&#xff0c;修改main函数3. 函数说明&#xff1a;4. qml 文件间的调用5. 界面布局6. 代码举例 文章简介 初学qml用来记录qml的学习过程&#xff0c;方便后面归纳总结整理。 1. 创建qml工程 如下图&#xff0c;我使用的是…

编译工具各版本与操作系统版本号兼容性冷知识 : JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号的兼容情况

编译工具各版本与操作系统版本号兼容性冷知识 &#x1f9e0;: JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号的兼容情况 文章目录 编译工具各版本与操作系统版本号兼容性冷知识 &#x1f9e0;: JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号…

探索UTONMOS《神念无界-源起山海》元宇宙游戏的奇幻世界

在科技的前沿&#xff0c;元宇宙游戏如同一扇神秘的大门&#xff0c;缓缓开启&#xff0c;引领我们进入一个前所未有的奇幻世界。 UTONMOS《神念无界-源起山海》元宇宙游戏是数字世界的巅峰之作&#xff0c;它打破了现实与虚拟的界限&#xff0c;让玩家能够身临其境地体验各种奇…

二分查找-在排序数组中查找元素的第一个和最后一个位置

给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 输入&#xf…

职场不败的社交口才是什么行为

职场不败的社交口才是什么行为 职场不败的社交口才&#xff1a;塑造卓越人际关系的行为艺术 在职场中&#xff0c;社交口才是一项至关重要的能力。它不仅能够帮助我们建立良好的人际关系&#xff0c;更能在关键时刻为我们赢得信任、提升影响力&#xff0c;从而在职场竞争中立于…

HR招聘,怎么做人才测评方案?

一个完整的人才测评环节&#xff0c;离不开对方案的合理设计&#xff0c;更离不开对方案的具体执行。人才测评方案&#xff0c;能够在很大程度上帮助人力资源工作者减轻负担&#xff0c;从繁琐的招聘工作中得到解脱&#xff0c;不再跟陀螺一样转个不停。只有具备合理的人才测评…

Java中的Collection集合

关于集合的介绍 集合分为Collection集合和Map集合&#xff08;Collection集合是单列集合和Map集合双列集合&#xff09;Collection和Map都为接口 Collection集合又分为List集合&#xff08;集合元素可重复&#xff09;和Set集合&#xff08;集合元素不可重复 &#xff09;Lis…

免费ChatGPT合集——亲测免费

1、YesChat 无需登录 网址&#xff1a;YesChat-ChatGPT4V Dalle3 Claude 3 All in One Freehttps://www.yeschat.ai/ 2. 讯飞星火 要登录 讯飞星火大模型-AI大语言模型-星火大模型-科大讯飞 3.通义千问 要登录 通义我是通义&#xff0c;一个专门响应人类指令的…

Linux快速部署大语言模型LLaMa3,Web可视化j交互(Ollama+Open Web UI)

本文在个人博客同步发布&#xff0c;前往阅读 1 介绍 本文将介绍使用开源工具Ollama(60.6k⭐)部署LLaMa大模型&#xff0c;以及使用Open WebUI搭建前端Web交互界面的方法。 我们先来过一遍几个相关的概念&#xff0c;对这块比较熟悉的朋友可跳过。 1.1 大规模语言模型 大规…

【我的Java学习笔记-2】

程序初体验 JDK的安装目录 bin&#xff1a;该路径下存放了各种工具命令。其中比较重要的有:javac和java&#xff08;重点掌握&#xff09;conf&#xff1a;该路径下存放了相关配置文件。include&#xff1a;该路径下存放了一些平台特定的头文件。jmods&#xff1a;该路径下存…

亿道三防onerugged|三防车载电脑在港口货柜车上的应用

作为一个专业人员&#xff0c;我深知在港口货柜车运输中&#xff0c;三防车载电脑的应用对于提高工作效率和解决实际问题的重要性。亿道三防onerugged系列产品的三防车载电脑以其卓越的功能特点和可靠性&#xff0c;为港口货柜车运输带来了深远的影响。 首先&#xff0c;三防车…

BUUCTF--web(1)

1、[极客大挑战 2019]Http1 1.http报文请求&#xff1a; 1、请求行&#xff1a; 第一部分是请求方法&#xff0c;常见包括GET、POST、OPTIONS&#xff08;我目前还没有见过我是菜鸡&#xff09; 第二部分是url 第三部分是HTTP协议(http(Hypertext transfer protocol)超文本传…

c++多文件,cmakelist编写简单示例

记录下c多文件cmakelist编写流程&#xff1a; 目录结构大致如下&#xff1a; 1、swap.h #include <iostream> #include <vector> #include <string> using namespace std;void swap(int *a,int *b); 2、swap.cpp #include "swap.h"void swap(…

【Linux学习】​​学习Linux的准备工作和Linux的基本指令

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

iOS - 多线程-读写安全

文章目录 iOS - 多线程-读写安全1. 多读单写1.1 场景1.2 实现方案1.2.1 pthread_rwlock&#xff1a;读写锁1.2.1.1 示例 1.2.2 dispatch_barrier_async&#xff1a;异步栅栏调用1.2.2.1 示例 iOS - 多线程-读写安全 假设有一个文件&#xff0c;A线程进行读取操作&#xff0c;B…