本篇文章给大家带来的内容是关于微信小程序中数据绑定的实例分析（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、微信小程序无法从js页面中绑定wxml页面中的标签，以此来获得或者设置标签的值或者属性，全部都是用数据绑定的方式来实现
2、wxml 中的动态数据均来自对应 page 的 data。
数据绑定：
1、简单的数据绑定
1 2 3 4 5 6 7 8 | wxml中应用双大括号将data中的数据绑定到相应的标签中：
<view> {{ message }} </view>
js中：
Page({
data: {
message: 'Hello MINA!'
}
})
|
2、标签属性的绑定
1 2 3 4 5 6 7 8 | wxml中，其中绑定的要在双引号之中：
<view id="{{id}}"> </view>
js中:
Page({
data: {
id: 0
}
})
|
3、控制属性的绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | wxml中（绑定在双引号中）
<view wx:if="{{condition}}"> </view>
js中：
Page({
data: {
condition: true
}
})
---或---
wxml中（绑定在双引号中）
<view hidden="{{condition}}"> </view>
js中：
Page({
data: {
condition: true
}
})
hidden只是隐藏，但是节点是生成的
wx:if不生成节点
|
4、关键字(需要在双引号之内)
1 2 3 4 5 6 7 | true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
|
5、运算
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 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: 'MINA'
}
})
5>数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
所有运算都是在{{}}之中进行的，这时候里面就相当于一些语言代码，而不是要呈现的内容
|
6、组合（不是很常见，不再赘述，如有需要，参考微信小程序开发文档，数据绑定部分）
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~