微信小程序判断wx:if wx:for template

  • Post author:
  • Post category:小程序


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:






‘this is 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传入的数据。




















































































































版权声明:本文为xingguanghui_1134原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。