小程序学习笔记2

逻辑判断

test.html

<view wx:if="{{bool}}">条件渲染显示</view>

tset.js

Page({
    data:{
    bool:true,
    },
    show:function(){
        this.setData({
            bool:!this.data.bool,
        })
    },
})

 

 

页面数字计算

 test.wxml

<view>{{3*55}}</view>
<view>{{"hello"+array[0]}}</view>

 

 

字符串链接

 test.wxml

<view>{{"hello"+array[0]}}</view>

 

 

使用模板

test.wxml

<!-- 定义一个模板 -->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!-- 使用这个模板 -->
<template is="msgItem" data="{{...ite2}}"/>

 

 

test.js

Page({
    data:{
        ite2: {
            index: 0,
            msg: 'this is a template!!!',
            time: '2016-09-15'
        }
    },
})

 

引用

 

import

test.wxml

<import src="../item/item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

 

item.wxml

<!--pages/item/item.wxml-->
<text>pages/item/item.wxml</text>
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

 

 

则最后输出的是

forbar

include

test.xml

<include src="../item/c.wxml"/>

 

 

c.wxml

<!--pages/item/c.wxml-->
<text>pages/item/c.wxml</text>

<template name="c">
<text>这个是c.wxml</text>
</template>

 

 

则最后输出：

pages/item/c.wxml

import和include的区别：
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置。