【愚公系列】2022年02月 微信小程序-数据绑定

举报
愚公搬代码 发表于 2022/02/28 09:36:51 2022/02/28
【摘要】 前言 1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成:js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架。json(配置文件):用来设置页面的窗口内容,遵循JSON语法规范。wxml(页面结构文件或视图文件):用于页面可视化组件的组织和描述,语法结构类似于xml,与html格式差别较大。wxss(样式文件):兼容CSS语法规范。 2.数据绑定的定义数据绑定:视觉...

前言

1.小程序页面结构

微信小程序的页面结构主要是分别由四个文件组成:

  • js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架。
  • json(配置文件):用来设置页面的窗口内容,遵循JSON语法规范。
  • wxml(页面结构文件或视图文件):用于页面可视化组件的组织和描述,语法结构类似于xml,与html格式差别较大。
  • wxss(样式文件):兼容CSS语法规范。

2.数据绑定的定义

数据绑定:视觉层数据与逻辑层数据通信的方法,也就是将一个用户界面元素的属性绑定到一个逻辑文件的对象实例上的某个属性的方法。在用户与视觉界面进行交互时,视觉界面数据改变,由视觉界面传递至逻辑层面更改数据(如输入框输入数据)。相反,当逻辑层数据更改后,也会即使更改视觉层数据(如网络数据的获取和展示)。数据绑定使用一种叫做Mustache语法的形式,是将属性变量用双层花括号({{}})括起来的形式进行绑定,可以作用于内容、组件属性、控制属性、关键字的绑定。

一、数据绑定

1.简单绑定

//Hello MINA!
<view> {{ message }} </view>
//item-0
<view id="item-{{id}}"> </view>
//false
<view wx:if="{{condition}}"> </view>
//关键字(需要在双引号之内)不要直接写 checked="false"
<checkbox checked="{{false}}"> </checkbox>
//false
<view hidden="{{flag ? true : false}}"> Hidden </view>
//true
<view wx:if="{{length > 5}}"> </view>
//Hello  MINA
<view>{{object.key}} {{array[0]}}</view>
//[0, 1, 2, 3, 4]
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
//{foo: 'my-foo', bar:'my-bar'}
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true,
    flag :null,
    length : 6,
    object: {
      key: 'Hello '
    },
    array: ['MINA'],
    zero: 0,
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

总结

数据的展示和绑定时小程序最主要的一部分,也是和后端api通信的基础。
数据绑定主要分为

  • 数据的简单绑定
  • 组件属性绑定
  • 运算绑定
  • 控制属性的绑定
  • 列表渲染绑定
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。