微信小程序判断wx:if wx:for template
2017-06-26 14:05
579 查看
view是组件类
wx:if<view wx:if="{{condition}}"><p>true</p></view><view wx:if="{{length>4}}">5</view><view wx:elif="{{length=4}}">4</view><view wx:else>2</view>使用block控制多个标签,不是一个组件,仅仅是包装元素。不在页面做任何渲染。<block wx:if="{{true}}"><view></view><view></view></block>===========wx:if 和hidden===============wx:if是惰性的初始渲染条件为真的时候才渲染。hidden始终被渲染,如果是频繁切换情景使用hidden.*********列表渲染*********wx:for<view wx:for="{{items}}">{{index}}:{{item.message}}</view>//wx:for-tiem指定数组当前元素的变量名//wx:for-index指定数组当前下标变量名<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}:{{itemName.message}}</view>模板(template)wxml提供模板,可以在模板种定义代码片段,在不同地方调用。<template name="msgItem"><view><text>{{index}}:{{meg}}</text></view></template>使用模板:is<template is="msgItem" data="{{...item}}"/>Page({ data: { item: { index:0,msg: 'thisis a template', time:'2016-09-15'} }})is属性可以使用Mustache语法,动态决定需要哪个模板:<template name="odd"><view>first</view></template><template name="even"><view>even</view></template><block wx:for="{{1,2,3,4}}"><template is="{{item%2==0?'even':'odd'}}"/></block>模板拥有自己的作用域,只能使用data传入的数据。
相关文章推荐
- 微信小程序(5)wx:if 条件判断
- 微信小程序 —— 瀑布流简单写法(css3属性加wx:if判断轻松实现)
- 【微信小程序】wx:for的使用
- 微信小程序 wx:for的使用实例详解
- 微信小程序循环:Wx:for
- 微信小程序开发warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance
- 微信小程序(wx:for)遍历对象
- 微信小程序使用三元运算符代替wx:if
- 微信小程序 列表渲染 wx:for
- 微信小程序-wx:for 循环列表
- 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别
- 微信小程序----wx:key(Now you can provide attr "wx:key" for a "wx:for" to improve performance.)
- 微信小程序wx:for和wx:for-item的正确用法
- 微信小程序 Now you can provide attr "wx:key" for a "wx:for" to improve performance.
- 微信小程序数据使用wx:for循环展示
- 微信小程序-wx:for 循环列表
- 微信小程序wx:if条件渲染
- 微信小程序使用三元运算符代替wx:if
- 【微信小程序】详解wx:if elif else的用法(搭配view、block)
- 微信小程序学习(三)——wx:for的使用