weex逻辑控制
在WEEX中,有if 和 repeat 两种逻辑运算,需要注意的是,逻辑控制不能够作用于<template>这样的根节点。
if 控制判断条件true/false直接对节点进行操作,if="true",添加一个节点, if="false",移除一个节点 ,使用if 的时候可以不用用花括号括起来。
repeat 就是对数组进行渲染,我们对数组进行repeat,在它的子元素上,绑定数组中的一个对象的key,就可以获取到相应的value了。
<template>
<container>
<container repeat="{{list}}" class="{{gender}}">
<image src="{{avatar}}"></image>
<text>{{nickname}}</text>
</container>
</container>
</template>
<style>
.male {...}
.female {...}
</style>
<script>
module.exports = {
data: {
list: [
{gender: 'male', nickname: 'Li Lei', avatar: '...'},
{gender: 'female', nickname: 'Han Meimei', avatar: '...'},
...
]
}
}
</script>
循环的过程中,不是 数组中循环的对象也是可以被嵌套调用的。
用$index可以获取到当前是在数组中的第一个。
正常情况下,track-by会导致整个循环列表被重新渲染。使用track-by可以尽可能地复用已经存在的,在使用track-by语法时,不要使用数据绑定语法。
weex逻辑控制的更多相关文章
- 转:阿里 Weex 思路与实战(web相关)
Weex——关于移动端动态性的思考.实现和未来 2016-04-05 勾股.伊耆 移动开发前线 本文由手机淘宝技术团队赵锦江(勾股).黄金涌(伊耆)等专家创作.手淘作为电商应用,对客户端/前端的动态性 ...
- ReactNative&weex&DeviceOne对比
React Native出来有一段时间了,国内的weex和deviceone是近期发布的,我可以说从2011年就开始关注快速开发的跨平台平台技术了,接触过phoneGap.数字天堂.appcan等早期 ...
- 阿里的weex框架到底是什么
title: 阿里的weex框架到底是什么 date: 2016-09-27 10:22:34 tags: vue, weex category: 技术总结 --- weex 工作原理 首先看下官方的 ...
- 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)
8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...
- weex image
weex 的image用来渲染图片, 可以使用img作为它的别名. 需要注意的是,他的长度可宽度必须指定, 不然它是不会工作的. 它没有任何的子组件. 有两个属性: src 用来指定图片的地址图片. ...
- weex scroller
今天学习了一下weex的 scroller.就简单地对其整理一下自己的学习笔记. <scroller>这个标签只能出现在列(column)上面, 只有当它自己的内容大于类似与PC父级的高度 ...
- 真机远程调试 ( IOS Android 以及微信,weex)
1.以前cordova远程调试,Android的直接连接USB后,用chrome打开chrome://inspect网址 IOS的打开Safari的developer下. 这是因为cordova的we ...
- weex 小结 --官方扩展组件
<wxc-tabbar> 页面底部的 tab 标签,通过点击在不同页面之间切换 属性: selected-index {number}:设置默认选中的 tab 索引,默认值为 0(第一个 ...
- weex环境搭建
1. 安装weex-toolkit sudo npm install -g weex-toolkit 装完之后就可以使用weex命令了.输入weex命令可以看到: weex test.we --qr ...
随机推荐
- 大型App要搞的几个系统
路由模块: 解耦各个业务,统一收敛页面跳转,动态决策跳转实现: 鉴权模块:收敛鉴权项目(比如登录.输入密码.短信验证.扫脸),后台动态控制鉴权项目: 收银台:收敛支付,统一到收银台: 开关 ...
- PHP 文件下载 显示进度条
前台调用:js调用: function downloadfile(id,name,price,curcount_pricelimit){ Date.prototype.Format = functio ...
- 2016 Google code jam 答案
二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...
- matlab更改打开时候默认路径
每次打开matlab都会的修改默认路径,是一件有些烦恼的事情.所以,就想尝试更改默认路径 方法如下: 1.在matlab安装目录,找到toolbox文件夹,打开local文件件,打开matlabrc. ...
- ubuntu 12.04 install docker-engine1.12.3
root@node3:/data/src# cat /etc/issueUbuntu 12.04.4 LTS \n \l root@node3:/data/src# cat /etc/apt/so ...
- Windows Server 2012 R2桌面化详细设置图解
一.任务栏左下角启动服务器管理器,然后进行设置. 1.登录不显示服务器管理器 2.本地服务器,看到右边的IE增强的安全配置,如图所示,关闭两项内容.这样就关闭了IE增强安全提示框. 3.“工具”菜单, ...
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- 初识c#
我记得我刚学c#的时候是在大一的下学期,那时候我在的学校是一个专科,因为我大一上学期学了c语言,对语言还蛮感兴趣,所以学的不错,在最后的考试是考的成绩还算可以,就考上了我们学校的教改班,那时候就是想好 ...
- 60阶单群同构于A5的证明
设$G$是$60$阶的单群,我们来证明他同构于$A_5$,一个比较直观地思路是考虑群表示$\phi:G\to S(\Sigma)$,由同态基本定理得到$$G/{\rm Ker}\phi \simeq ...
- SVN数据仓库迁移
1.在新服务器上部署环境 yum -y install subversion 2.备份原服务器数据仓库 svnadmin dump /home/myrepos >/data/svn_dump s ...