{{}}雙大括號數據綁定,
可以在屬性: 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,沒有被調用
