原生微信小程序数据渲染

Posted 2022-06-01 jiayinnnnn

一直在写vue，第一次接触微信小程序，还是原生，最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊！！
所以最近大概更新的都是微信小程序原生的内容了~~
么么哒！！一定会继续努力的！！
tips:在小程序项目中，app.json文件里的

   //页面配置路径
 "pages":[
   "page/index/index",   //默认首页
   "page/index/logs",
  ]

　　

正题：微信小程序原生数据渲染
条件渲染：wx:if wx:elif wx:else
用法与vue的v-if v-else if 和v-else 相同，但是当写进标签中时，需要
eg

<view wx:if=" age >=18 ">成年</view>
<view wx:elif=" age <16">青春期呢</view>

 

一个条件控制多个元素显示
block标签，本身不显示，可以简化代码
eg

<block wx:if=" age >=18 " >
   <view>是成年</view>
   <view>可以去网吧了</view>
</block>

 

hidden可以根据条件来决定是否显示某元素
eg

<view hidden="false">你好看得见我吗</view>   //不显示
<view hidden="true">你好看得到我了吧</view>   //显示

　

hidden 和wx:if的区别就类似于vue中的v-if 和v-show

小程序中的数据遍历
遍历数组：

<view wx:for="users">
   <text>index +1</text>  //数组的索引值
   <text>item.name</text>  //数组中对象的key值name
   //默认item是单元值
 </view>

 

微信小程序的事件绑定
bind:tap