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

原生微信小程序数据渲染的更多相关文章

  1. Taro -- 原生微信小程序转taro

    微信小程序转Taro  (转发https://nervjs.github.io/taro/docs/taroize.html) Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以 ...

  2. 微信小程序-列表渲染多层嵌套循环

    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...

  3. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  4. 微信小程序 -- 数据请求

    微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> ...

  5. flume采集微信小程序数据

    flume采集微信小程序数据 flume收集前端埋点数据[1]POST请求http://f.x.com:50000数据格式: JsonArray数据格式示例:[{ "headers" ...

  6. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  7. 高大上的微信小程序中渲染html内容—技术分享

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...

  8. 微信小程序-数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearSt ...

  9. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

随机推荐

  1. 17个方法防止dedeCMS织梦网站被黑挂木马

    dede织梦cms系统的程序存在漏洞,黑客攻击方法层出不穷,导致网站经常被黑,被百度安全中心等拦截,影响排名和流量,让站长非常头疼,下面总结一些防止dede织梦cms系统被攻击设置的方法,可有效的防止 ...

  2. excel导入、下载功能

    1.excel导入.下载功能 2.首先,我们是居于maven项目进行开发引入poi,如果不是那就手动下载相应的jar包引入项目就可以了 <!-- poi --> <dependenc ...

  3. iOS之SceneKit.h文件简介

    1.SceneKit简介 SceneKit(SK)是WWDC12推出的OS X平台的Cocos 3D渲染引擎框架.支持粒子效果,物理模拟,脚本事件,多程渲染,支持iOS平台.SceneKit整合了Co ...

  4. 集中式日志分析平台 - ELK Stack - 安全解决方案 X-Pack

    大数据之心 关注  0.6 2017.02.22 15:36* 字数 2158 阅读 16457评论 7喜欢 9 简介 X-Pack 已经作为 Elastic 公司单独的产品线,前身是 Shield, ...

  5. <a>标签的SEO优化细节

    <a>标签的SEO优化细节 如果需要在新窗口中打开链接,我们使用的方法是在a上加上taget=“_blank”,但很多人不知道这是不符合w3c的规范的,在使用严格的DOCTYPE(xhtm ...

  6. mysql模糊查询特殊字符(\,%和_)处理

    /** * sql模糊查询特殊字符(\,%和_)处理 * * @param string $str * @return string */ public static function like_se ...

  7. 学习 debug

    要在代码编辑器中设置源代码断点,有以下 4 种操作方式. (1) 把光标移到要设为断点的行上,按下 F5 键. (2) 用鼠标左键单击要设为断点的行的最左端. (3) 用鼠标右键单击要设为断点的行,在 ...

  8. LoadRunner参数化详解【转】

    距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...

  9. 查看python安装位置和已安装库的相关操作

    打开cmd.exe, *查看python安装位置 where python *查看已安装库 pip list 或者pip freeze *查看可以更新的第三方库 pip list --outdated ...

  10. Windows相关命令

    1.查看端口8080被哪个进程占用 netstat -ano | findstr "8080" 2.查看进程号为5768对应的进程 tasklist | findstr " ...