小程序数据绑定、列表渲染、条件渲染、模板、事件、引用

WXML

WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看WXML具有什么能力：、

数据绑定

{{message}}

//page.js

page({

data:{

        message:'Hello MINA!'

        }
复制代码

})

列表渲染

//page.js

Page({

data: {

    array: [1,2,3,4,5]

    }
复制代码

})

条件渲染 WEBVIEW

<view wx:elif=“{{view == 'app'}}”>app

mina

//page.js

page({

data:{

        view:'mina'

        }
复制代码

})

模板

<view> 

    Firstname:{{firstname:'xiaoming'}},Lastname:{{lastname:'xiaohong'}}

</view>
复制代码

直接引用：

//page.js

page({

data:{

        staffA:{firstname:'xiaowei',lastname:'xiaowang'},

        staffB:{firstname:'xiaolu',lastname:'honhhuang'},

        staffC:{firsrtname:'xiaohuang',lastname:'xiaoping'}
复制代码

}

})

WXML 引用 import 可以在当前文件中使用目标文件定义的 template

在 item.wxml 中定义了一个 item 的 template

    <text>{{text}}</text>
复制代码

在 index.wxml 中引用 item.wxml，就可以使用 item 的模板

<template is="item" data="{{text："aa2"}}">

转载于:https://juejin.im/post/5a373adaf265da43231b1114