美文网首页
数据绑定

数据绑定

作者: 进击的码农设计师 | 来源:发表于2018-05-21 18:13 被阅读0次
  • 1、为什么会有数据绑定:

  • 用户界面呈现会因时刻不同、数据发生变化而有所不同。或是因为用户操作发生了动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力,从而达到更好的用户体验。
  • 在Web开发中,借助JavaScript并通过DOM接口,完成界面的动态更新;
  • 在小程序中,使用WXML语言提供的数据绑定功能,完成界面的动态更新;
  • 2、数据绑定语法:

  • WXML 中的动态数据均来自对应 Page 的 data;
  • 数据绑定使用 Mustache 语法(双大括号)将变量包起来。
    {{ value }}
  • 3、数据绑定基本用法:

3.1 内容绑定:

内容绑定是数据绑定的最基本用法,可以在标签内渲染动态的内容,需要在双引号之内。

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})
3.2 组件属性绑定:

可以实现动态属性,借助动态属性,可以实现如下操作:
——动态样式;
——动态宽度;
——动态长度;
——.....

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})
3.3关键字:

需要在双引号之内:
true:boolean 类型的 true,代表真值。
false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"> </checkbox>

——注意: 不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。

3.4 运算:

可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

  • 三元运算:可以简化代码,减少代码量,提升代码的可读性。
<view hidden="{{flag ? true : false}}"> Hidden </view>
  • 算数运算:标签内支持简单的加减乘除运算。
<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
  • 逻辑判断:
<view wx:if="{{length > 5}}"> </view>
  • 字符串运算:标签内支持对字符串的操作。
<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})
  • 数据路径运算: WXML支持对对象、数组的路径操作,读取其内部的数据。
<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})
3.5 组合:

也可以在 Mustache 内直接进行组合,构成新的对象或者数组。

  • 数组:
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]

  • 对象: WXML可以在 Mustache内进行对象的组合。
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

——注意:

  • 如果组合时,出现了相同的变量名,后面的变量会覆盖前面的变量;
  • 花括号和引号之间如果有空格,空格最终将解析成为字符串。
<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

相关文章

  • AngularJs数据绑定

    数据的绑定:单项数据绑定和双向数据绑定 1、单项数据绑定(模型到视图) 运行结果: 其中绑定数据有两种方式:“{{...

  • 六、ASP.NET之数据绑定控件(一)

    数据绑定控件 简单数据绑定 1、数据绑定的实现方式分为: (1)简单绑定 (a)表达式绑定 (b)方法绑定 (2...

  • Data Bindings 数据绑定

    数据绑定 分为两种:1.控件间绑定 2.后台数据绑定 一、控件间绑定 二、后台数据绑定

  • 第十三章 数据绑定

    数据绑定介绍 Spring MVC是怎样完成的数据绑定 在数据绑定过程中,Spring MVC框架会通过数据绑定组...

  • Vue和React数据绑定对比

    在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全...

  • 数据的绑定 --- 双向绑定

    数据双向绑定 : 视图的数据可以绑定到模型当中,模型的数据可以绑定到视图当中 想要实现视图的数据绑定到模型当中,必...

  • AppWorker教程-数据绑定

    数据绑定 数据绑定是在应用程序 UI 与数据源建立连接的过程。如果绑定正确数据,则当数据更改其值时,绑定到数据的U...

  • Angular入门0

    Angular 绑定数据 数据文本绑定 绑定HTML 3.声明属性的几种方式 4.绑定属性用[]包裹 5.数据循环...

  • Vue入门(二)——数据绑定

    一、什么是双向数据绑定 双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指:HTML标签上的数据绑定到Vue...

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

网友评论

      本文标题:数据绑定

      本文链接:https://www.haomeiwen.com/subject/jprqjftx.html