数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--wxml-->
<!---模板开始---> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template>
<!--模板结束-->

<!--调用模板 模板的name 在调用的时候使用 is 对应 data 中表示模板中显示的数据(obj类型) -->
<template is="staffName" data="{{...staffA}}"></template> 

<template is="staffName" data="{{...staffB}}"></template>

<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

//绑定一个时间 点击时调用 add
<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

微信小程序-视图的更多相关文章

  1. 微信小程序视图层介绍及用法

    一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...

  2. 微信小程序-视图容器组件

    view 视图容器 例如: <view class="section"> <view class="section__title">fl ...

  3. 微信小程序-视图事件

    事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...

  4. 微信小程序-视图数据绑定

    数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数 ...

  5. 微信小程序 - 视图层 | 基础语法

    视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...

  6. 微信小程序-视图视图引用

    引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...

  7. 微信小程序-视图模板

    定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如: <!-- index: int msg: string time: string --& ...

  8. 微信小程序-视图列表渲染

    wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...

  9. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

随机推荐

  1. BizTalk动手实验(十六)EDI-AS2解决文案开发配置

    1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...

  2. BizTalk 开发系列(三十九) BizTalk Server 2009技术概览

    BizTalk Server 2009已经发布一段时间了,之前Beta版发布的时候也写过一篇文章<BizTalk Server 2009 Beta初体验>, 当时比较了2006 R2与20 ...

  3. Android课程---Oracle VM VirtualBox出现不能为虚拟机打开一个新任务

    因工作需要在Win7下增添了Win7虚拟系统,随着VirtualBox 4.326的版本更新,用户们也开始升级.一用户在升级后发现原来创建的虚拟机无法打开,提示信息为:不能为虚拟电脑win7打开一个新 ...

  4. Linux内存管理基本概念

    1. 基本概念 1.1 地址 (1)逻辑地址:指由程序产生的与段相关的偏移地址部分.在C语言指针中,读取指针变量本身值(&操作),实际上这个值就是逻辑地址,它是相对于你当前进程数据段的地址.( ...

  5. jsp开发模式和web计算器案例

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. php SPL学习

    数据结构 SplDoublyLinkedList - 该SplDoublyLinkedList类提供了一个双向链表的主要功能 SplStack - 该SplStack类提供了一种使用双向链表实现栈的主 ...

  7. 奥迪--A4L

    -型号:A4L -价格:30-41W -动力:2T -变速箱:7挡双离合 -长宽高:4.81,1.84,1.43 -油箱:54L -发动机:EA888 -大灯:氙气(选装LED)

  8. eclipse创建web项目

    总结为3步: 必备环境: Eclipse jee Tomcat 1.创建services 2.创建dynamic web project项目 3.WebContent路径下创建index.jsp 运行 ...

  9. delete all untracked files

    git clean -f git clean -fdx f   file d  directory x   .gitignore

  10. Nosql学习笔记

    1.利用Query查询,Query操作只搜索主键属性值,并支持对键属性值使用部分比较运算符,以优化搜索过程. * 查询结果始终按范围键排序.如果范围键的数据类型是数字,则会按数字顺序返回结果:否则,会 ...