在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逻辑控制的更多相关文章

  1. 转:阿里 Weex 思路与实战(web相关)

    Weex——关于移动端动态性的思考.实现和未来 2016-04-05 勾股.伊耆 移动开发前线 本文由手机淘宝技术团队赵锦江(勾股).黄金涌(伊耆)等专家创作.手淘作为电商应用,对客户端/前端的动态性 ...

  2. ReactNative&weex&DeviceOne对比

    React Native出来有一段时间了,国内的weex和deviceone是近期发布的,我可以说从2011年就开始关注快速开发的跨平台平台技术了,接触过phoneGap.数字天堂.appcan等早期 ...

  3. 阿里的weex框架到底是什么

    title: 阿里的weex框架到底是什么 date: 2016-09-27 10:22:34 tags: vue, weex category: 技术总结 --- weex 工作原理 首先看下官方的 ...

  4. 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

    8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...

  5. weex image

    weex 的image用来渲染图片, 可以使用img作为它的别名. 需要注意的是,他的长度可宽度必须指定, 不然它是不会工作的. 它没有任何的子组件. 有两个属性: src 用来指定图片的地址图片. ...

  6. weex scroller

    今天学习了一下weex的 scroller.就简单地对其整理一下自己的学习笔记. <scroller>这个标签只能出现在列(column)上面, 只有当它自己的内容大于类似与PC父级的高度 ...

  7. 真机远程调试 ( IOS Android 以及微信,weex)

    1.以前cordova远程调试,Android的直接连接USB后,用chrome打开chrome://inspect网址 IOS的打开Safari的developer下. 这是因为cordova的we ...

  8. weex 小结 --官方扩展组件

    <wxc-tabbar>  页面底部的 tab 标签,通过点击在不同页面之间切换 属性: selected-index {number}:设置默认选中的 tab 索引,默认值为 0(第一个 ...

  9. weex环境搭建

    1. 安装weex-toolkit sudo npm install -g weex-toolkit 装完之后就可以使用weex命令了.输入weex命令可以看到: weex test.we --qr ...

随机推荐

  1. linQ学习笔记之二简单的linq使用

    最基本的Lambda表达式 (参数列表)=>{f方法体} 参数列表中的参数类型可以是明确类型或者是推断类型 如果是推断类型,则参数的数据类型将由编译器根据上下文自动推断出来 linQ to Ob ...

  2. ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档

    ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档 2015-10-21 12:51 525人阅读 评论(0) 收藏 举报  分类: Oracle RA ...

  3. Linux安装mariadb二进制版本

    上一篇说了mariadb编译安装过程,但在生产环境中一般使用发布好的二进制版本,由于安装过程和之前一样,不再详细叙述,只是简单概括一下安装过程: 1. 下载 地址为:https://downloads ...

  4. linux 文件系统

    / 根目录 /bin 存放着启动时所需要的普通程序.很多程序在启动以后也很有用,它们放在这个目录下是因为它们经常要被其他程序调用 /boot 很多Linux系统把内核映像和其他一些和启动有关的文件都放 ...

  5. Flex 1046: 找不到类型,或者它不是编译时常数;1180: 调用的方法 CompPropInfo 可能未定义

    导入项目之后一直报这个错误, 1046: 找不到类型,或者它不是编译时常数: 1180: 调用的方法 CompPropInfo 可能未定义 想这应该是没有把当前这个类编译进项目当中,找了半天也没有找到 ...

  6. tp基础,文件存储路径

    tp框架的几点注意事项: 1.tp框架结构MVC模式2.MVC模式最终访问的是方法,不是具体 页面3.控制器用驼峰法命名4.约定胜于配置 index.php:入口文件 Application:应用程序 ...

  7. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  8. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  9. 【leetcode】Longest Common Prefix

    题目简述: Write a function to find the longest common prefix string amongst an array of strings. 解题思路: c ...

  10. Oracle中生成随机数的函数(转载)

    在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...