b-click
的值的字段在methods
里定義. 在方法里面,可以通過event
拿到點(diǎn)擊的上下文關(guān)系.
var bs = bui.store({
scope: "page",
methods: {
getMessage: function() {
console.log(event)
}
}
})
<div b-click='page.getMessage'>最簡單</div>
示例:
var bs = bui.store({
scope: "page",
methods: {
getMessage: function(a,b) {
console.log(a) // 輸出3
console.log(b) // 輸出4
}
}
})
<div class="bui-btn" b-click='page.getMessage(3,[4],{"test":"對象"})'>點(diǎn)擊輸出3個(gè)參數(shù):3,[4],{"test":"對象"}</div>
如果參數(shù)是對象,需要是一個(gè)標(biāo)準(zhǔn)JSON才能轉(zhuǎn)換,
b-click
屬性值并且一定要用單引號''
.
示例:
var bs = bui.store({
scope: "page",
methods: {
getMessage: function(dom) {
// 這個(gè)名字太復(fù)雜只能通過屬性的方式獲取, 或者傳索引跟數(shù)據(jù)匹配的方式
var name = $(dom).attr("name");
}
}
})
<div class="bui-btn" b-click='page.getMessage($this)' name="abc復(fù)雜名字(a).pdf">點(diǎn)擊輸出3個(gè)參數(shù):3,[4],{"test":"對象"}</div>
有些時(shí)候,我們不得不通過dom去操作的時(shí)候, 可以通過一些內(nèi)置的參數(shù)傳給方法.
示例:
var bs = bui.store({
scope: "page",
methods: {
getMessage: function(a,b) {
console.log(a) // 當(dāng)前索引
console.log(b) // 當(dāng)前的dom對象
},
remove: function(index){
console.log(index); // 拿到跟 a 一樣的索引.
}
}
})
<div b-click="page.getMessage($index,$this)" >
<div b-click="page.remove($parentIndex)" >刪除</div>
</div>
示例里面的
remove
方法, 如果傳的是$index
, 那它永遠(yuǎn)等于0, 而$parentIndex
是會根據(jù)父級的元素改變的.
如果層級太深, 通過$parentIndex
都不能獲取到, 那b-target
屬性就可以派上用場了
例如:
<ul class="bui-list">
<li>
<div class="bui-btn">
<h3>標(biāo)題名</h3>
<!-- $parentIndex 指向的是 bui-btn 而我們要刪除的,其實(shí)是li的索引才是跟數(shù)據(jù)一一對應(yīng)的 -->
<div b-click="page.remove($parentIndex)" >刪除</div>
<!-- 通過b-target 修改了 $index 指向 li -->
<div b-click="page.remove($index)" b-target="li">刪除</div>
</div>
</li>
</ul>
示例:
var bs = bui.store({
scope: "page",
methods: {
getMessage: function(index) {
// 觸發(fā)自定義事件,參數(shù)可以自定義
this.trigger("remove","自定義參數(shù)")
}
},
mounted: function(){
// 加載后, 監(jiān)聽自定義remove的時(shí)候做什么事情.
this.on("remove",function (a) {
console.log(a)
})
}
})
<div b-click="page.getMessage($index)" ></div>
通過點(diǎn)擊觸發(fā)a值的改變, 在 a 值改變的時(shí)候, 又可以處理不同的事情.
示例:
var bs = bui.store({
scope: "page",
data: {
a: 1
},
methods: {
changeA: function() {
this.a++;
}
},
watch: {
a: function (newVal,oldVal) {
console.log(newVal); // 改變后的值
console.log(oldVal); // 改變前的值
}
}
})
<div class="bui-btn" b-click="page.changeA">改變a的值,觸發(fā)watch事件</div>
點(diǎn)擊的時(shí)候,查看chrome控制面板的輸出信息.
更多建議: