wx:for的使用和事件传参,解构赋值的应用

在页面的.js文件中创建了一个对象,

wx:for的使用和事件传参,解构赋值的应用_第1张图片

并且在页面的view中调用了两种不同的方法将对象中的元素显示出来!

第2种代码要加强理解!!!

wx:for的使用和事件传参,解构赋值的应用_第2张图片

 小程序中的wx:if     wx:elif   wx:else    其实好像c语言中的 if-elif-elsewx:for的使用和事件传参,解构赋值的应用_第3张图片

在页面的.js文件中 创建了一个hotel数组,里面包含了酒店的图片和名字!

wx:for的使用和事件传参,解构赋值的应用_第4张图片

{{index}}是显示标号,{{item.name}}显示的是对象中的name属性!

wx:for的使用和事件传参,解构赋值的应用_第5张图片 图1

 问题1: index,item总是这两个英文吗?其实是可以改变的,如下图

wx:for的使用和事件传参,解构赋值的应用_第6张图片

 问题2:图1中的画红色标线的,需要加wx:key 就可以消除!!!

wx:for的使用和事件传参,解构赋值的应用_第7张图片

 wx:for的使用和事件传参,解构赋值的应用_第8张图片

点击了红色方块后 我的名字和年龄发生改变,这里主要涉及到两个知识点!

事件传参和解构赋值!

wx:for的使用和事件传参,解构赋值的应用_第9张图片

 wx:for的使用和事件传参,解构赋值的应用_第10张图片

 

你可能感兴趣的:(前端)