{{}}双大括号数据绑定,
可以在属性: class, value, style, 标签中的元素等,
只要js数据中有对应的data
<template>
<div>
<text class="{{size}}">Hello</text>
<text class="title {{status}}">World</text>
</div>
</template>
<style>
.large { font-size: 64; }
.small { font-size: 32; }
.title { font-weight: bold; }
.success { color: #00ff00; }
.error { color: #ff0000; }
</style>
<script>
module.exports = {
data: {
size: 'large',
status: 'success'
}
}
</script>
if 和vue的if使用方法相似, 但是循环迭代, weex使用的是repeat, 也包括值和键
<template>
<list class="list">
<cell class="row" repeat="(index, item) in rows" index="{{$index}}">
<text class="item-title">row {{item.id}} -- {{index}}</text>
</cell>
</list>
</template>
<style></style>
<script>
module.exports = {
data: {
rows:[
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6}
]
}
}
</script>
遍历迭代一组数据, 点击某一列后, 把index,传入方法, 进行其他操作的方式
主要使用事件中的
$event, console.log($event), 后看其属性
Object
_alreadyTriggered: true
isTrusted: true
target: Element
attr: Object
index: 2 //主要看这里, 这里有属性, 和标签上的属性一样的
value: "row 3 -- 2" //这是标签内渲染的结果
__proto__: Object
children: Array[0]
classStyle: Object //粘贴过来成这样了,下面的不一一改了, 自己log出来自家看
depth
:
3
docId
:
"http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr"
event
:
Object
nextSibling
:
undefined
nodeId
:
"12"
nodeType
:
1
ownerDocument
:
Document
parentNode
:
Element
previousSibling
:
undefined
pureChildren
:
Array[0]
ref
:
"12"
style
:
Object
type
:
"text"
__proto__
:
Node
timestamp
:
1487061128774
type
:
"click"
__proto__
:
Object
源代码展示, 这样点击任何一行text都会把其index获取
<template>
<list class="list">
<cell class="row" repeat="(index, item) in rows" index="{{$index}}">
<text class="item-title" index={{index}} onclick="log($event)">row {{item.id}} -- {{index}}</text>
<text class="nextSibing" b={{index}}>{{index}}</text>
</cell>
</list>
</template>
<style></style>
<script>
module.exports = {
data: {
rows:[
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6}
]
},
methods: {
log:function(item) {
console.log(item)
}
}
}
</script>
$event还有下一个节点的信息(属性及渲染的元素)$event.target.nextSibing.attr.属性名
Paste_Image.png
还有父级, 下一个兄弟节点, 上一个兄弟节点, 等
Paste_Image.png
<template>
<div lal="abs">
<text popo="popo">popo</text>
<text index=1 onclick="update($event, 1, 2)">Result: {{result}}</text>
<text papa="bobo">bobo</text>
</div>
</template>
<script>
module.exports = {
data: {
result: '<empty>'
},
methods: {
update: function (e, x, y) {
console.log(e);
this.result = e.type + (x + y)
}
}
}
</script>
数据格式被解析时, 会自动按view的层级解析,
//html
<div class="conentTop">
<div class="" repeat={{topItem}}>
<div class="" repeat={{data}}>
<image src={{yifu}} style="width: 66; height: 66;"></image>
<text>{{name}}</text>
</div>
</div>
</div>
//script
module.exports = {
data:{
//数据
topItem: [
{data:[{name: '连衣裙'},{name: '连衣裙e'},{name: '连衣裙f'},{name: '连衣裙'}]},
{data:[{name: '连衣裙'},{name: '连衣裙'},{name: '连衣裙'},{name: '连衣裙'}]}
],
name:'单独写在外面的name',
}
}
- 看上面的数据层级 ,在页面遍历迭代时, 会根据嵌套自动解析对应的数据,
- 单独写在外面的name,没有被调用
