码迷,mamicode.com
首页 > 微信 > 详细

原生微信小程序数据渲染

时间:2019-08-01 09:46:42      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:你好   相同   item   需要   用法   ips   show   highlight   key   

一直在写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

原生微信小程序数据渲染

标签:你好   相同   item   需要   用法   ips   show   highlight   key   

原文地址:https://www.cnblogs.com/JiAyInNnNn/p/11280428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!