微信小程序: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>

内容运算

算数运算

相关推荐
派小心.10 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
一木 之林13 小时前
微信小程序开发全攻略·文章版|00 总览:74集学习路径与知识地图
人工智能·学习·计算机视觉·微信小程序·小程序
m0_5873830016 小时前
无人自助拼豆系统的全栈开发方案
java·后端·struts·小程序·架构
AI源码16 小时前
雷山苗韵 - 非物质文化遗产传承平台
小程序·非遗小程序
CRMEB系统商城16 小时前
CRMEB开源商城系统(PHP)v8.0,打造全新AI二开商城底座!
开发语言·人工智能·小程序·开源·php
一木 之林17 小时前
微信小程序开发全攻略·文章版|01 入门与环境搭建
人工智能·学习·计算机视觉·微信小程序·notepad++
StevenLdh18 小时前
第八期 · 情绪闯关挑战盒:一个「无惩罚」成就系统的数据建模
java·微信小程序
眨眼猫会务智能体19 小时前
眨眼猫会务智能体会务系统的服务响应怎么样?出问题多久有人接?
安全·小程序·会务
微订校园外卖平台19 小时前
校园跑腿小程序上线:四端架构与校园外卖系统履约链路拆解
小程序·架构·外卖系统·本地生活·微订