数据绑定
逻辑数据储存在js文件中，当前端wxml页面与js数据交互时，需要使用数据绑定，在wxml文件中{{}}双花括号内输入js中变量，wxml会从js文件中更新数据到前端
标签内参数也可用作数据绑定，花括号内可以进行运算字符串拼接
循环
for循环
wx:for=”{{数组或对象}}”
wx:for-item=”循环项名称“
wx:for-index=”循环项索引”
wx:for-index=”循环项索引”
js文件data内数据
for循环相关代码及界面
只有一层循环时,wx:for-item和wx:for-index可省略,但默认值仍为item和index
当for循环的内容为对象时,item代表对象的值,index代表对象的属性
block标签
block标签为占位标签,当标签内属性过多时,可以将相关代码放在block标签内,但block标签并无实质作用
用block标签占位
条件渲染
当是否根据满足条件显示标签时,可以选择条件判断显示或隐藏标签
wx:if=”{{true/false}}”
当判断条件为true时显示标签
当判断条件为false时隐藏标签
同时可以使用wx:elif wx:else进行嵌套
条件渲染
hidden隐藏标签
同时,hidden也可以进行隐藏标签
hidden=”{{true/false}}”
当hidden为true时隐藏当前标签内容
反之亦然
hidden隐藏标签内容
小结:当标签不经常切换显示,优先使用wx:if.wx:if会将标签从页面结构移除,耗费性能
当标签频繁切换显示时,优先使用hidden,hidden通过添加样式切换显示.同时,hidden不能和display同时使用,display行内优先级比较高,会覆盖hidden,导致标签无法隐藏.
事件绑定
输入框事件绑定
将输入框绑定事件需要在标签内设置bindinput属性,参数为需要执行的函数,函数内需要.detail.value获取输入的值,函数内获取的值需要调用setData才能赋值给data内变量进行显示.
data: {
num:0,
},
handleInput(e){
console.log(e.detail.value),
this.setData({
num:e.detail.value
})
},
界面显示及控制台输出
在输入框内输入数字,数字赋值给num变量,前端获取变量内容进行显示
小结:函数内赋值给data内变量时,需要使用setData({})方法.
按钮事件绑定
js内代码
data: {
num:0,
},
handleInput(e){
console.log(e.detail.value),
this.setData({
num:e.detail.value
})
},
add(){
this.setData({
num:Number(this.data.num)+1,
})
},
sub(){
this.setData({
num:this.data.num-1,
})
},
handletap(i){
console.log(i);
const operation=i.currentTarget.dataset.operation;
this.setData({
num:Number(this.data.num)+Number(operation),
})
},不传参绑定及传参绑定事件
不传参跳转函数
按钮事件绑定和输入框大致相同，但事件名称为bindtap，点击按钮后，触发点击事件。跳转对应事件函数，实例中分别定义两个不传参按钮，点击加时将data中变量加一，点击减时将变量减一
传参跳转函数
定义两个传参跳转函数，自定义参数设置data-operation，值为参数，跳转函数后需要进入数组取出参数使用，并更改data中变量
小结：运算时注意变量类型，避免字符串相加，传参后注意进入数组取值
