微信小程序中数据绑定怎么实现-创新互联

这篇文章主要介绍了微信小程序中数据绑定怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

在渝水等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站设计 网站设计制作按需开发,公司网站建设,企业网站建设,品牌网站设计,成都营销网站建设,成都外贸网站建设,渝水网站建设费用合理。

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

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

wxml中应用双大括号将data中的数据绑定到相应的标签中:
 {{ message }} 
js中:
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2、标签属性的绑定

wxml中,其中绑定的要在双引号之中:
 
js中:
Page({
  data: {
    id: 0
  }
})

3、控制属性的绑定

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

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

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

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

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

5、运算

1>三元运算

 Hidden 

2>算数运算

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

3>逻辑判断

 5}}"> 

4>字符串运算

{{"hello" + name}}
Page({
  data:{
    name: 'MINA'
  }
})

5>数据路径运算

{{object.key}} {{array[0]}}
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序中数据绑定怎么实现”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站名称:微信小程序中数据绑定怎么实现-创新互联
网站URL:http://myzitong.com/article/jdcsp.html