Rumah > applet WeChat > Pembangunan program mini > 微信小程序中数据绑定的实例分析(代码)

微信小程序中数据绑定的实例分析(代码)

不言
Lepaskan: 2018-08-21 16:38:41
asal
2642 orang telah melayarinya

本篇文章给大家带来的内容是关于微信小程序中数据绑定的实例分析(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、微信小程序无法从js页面中绑定wxml页面中的标签,以此来获得或者设置标签的值或者属性,全部都是用数据绑定的方式来实现
2、WXML 中的动态数据均来自对应 Page 的 data。

数据绑定:
1、简单的数据绑定

wxml中应用双大括号将data中的数据绑定到相应的标签中:
<view> {{ message }} </view>
js中:
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})
Salin selepas log masuk

2、标签属性的绑定

wxml中,其中绑定的要在双引号之中:
<view id="{{id}}"> </view>
js中:
Page({
  data: {
    id: 0
  }
})
Salin selepas log masuk

3、控制属性的绑定

wxml中(绑定在双引号中)
<view wx:if="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
---或---
wxml中(绑定在双引号中)
<view hidden="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
//hidden与wx:if的区别:
hidden只是隐藏,但是节点是生成的
wx:if不生成节点
Salin selepas log masuk

4、关键字(需要在双引号之内)

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
//在新版的微信小程序开发工具中,这个问题好像被解决了,即checked="true"也是对的
Salin selepas log masuk

5、运算

1>三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2>算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
view中的内容为 3 + 3 + d。

3>逻辑判断

<view wx:if="{{length > 5}}"> </view>

4>字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: &#39;MINA&#39;
  }
})

5>数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: &#39;Hello &#39;
    },
    array: [&#39;MINA&#39;]
  }
})

//综上:
所有运算都是在{{}}之中进行的,这时候里面就相当于一些语言代码,而不是要呈现的内容
Salin selepas log masuk

6、组合(不是很常见,不再赘述,如有需要,参考微信小程序开发文档,数据绑定部分)

相关推荐:

微信小程序中数据的自定义分析过程

微信小程序中iconfont的用法详解(附代码)

微信小程序实例:实现随机验证码(附代码)

Atas ialah kandungan terperinci 微信小程序中数据绑定的实例分析(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan