免費(fèi)AI編程助手
BUI 模板語(yǔ)法
2020-08-11 14:37 更新
數(shù)據(jù)改變的時(shí)候應(yīng)該做什么事情, 這是通過(guò)行為屬性去綁定的.
行為屬性語(yǔ)法
| 屬性名 | 語(yǔ)法示例 | 語(yǔ)法描述 |
|---|---|---|
| b-text | <b b-text="page.size"></b> |
設(shè)置文本,一般使用 b 標(biāo)簽 |
| b-html | <div b-html="page.size"></div> |
設(shè)置html,html一般使用div標(biāo)簽 |
| b-value | <input b-value="page.size"/> |
設(shè)置value, b-value屬性,必須是input標(biāo)簽 |
| b-show | <b b-show="page.isShow"></b> |
顯示當(dāng)前dom, page.isShow=false; 則控制不顯示. 初始化的時(shí)候是隱藏,則設(shè)置 <b b-show="!page.isShow"></b> |
| b-model | <input b-model="page.size"/> |
雙向綁定,會(huì)把當(dāng)前值,設(shè)置到value屬性,并監(jiān)聽value的改變,改變又會(huì)重新設(shè)置 page.size 的值 |
| b-bind | <b b-bind="page.attrs"></b> |
設(shè)置屬性, key值為屬性名, 結(jié)果: <b title="我是動(dòng)態(tài)標(biāo)題"></b> |
| b-style | <b b-style="page.styles"></b> |
設(shè)置style的樣式, key值為樣式屬性, 結(jié)果: <b style="color:red;border:1px solid #ddd"></b> |
| b-class | <b b-bind="page.classNames"></b> |
設(shè)置class的樣式, 結(jié)果: <b class="active"></b>, classNames可以是對(duì)象,也可以是字符串,或者是布爾值 |
| b-template | <ul b-template="page.list"></ul> |
綁定模板,page.list的數(shù)據(jù)更新會(huì)及時(shí)反應(yīng)到頁(yè)面上 |
| b-command | <ul b-template="page.list" b-command="append"></ul> |
非必須,配合b-template一起使用,代表第一次模板渲染采用什么方法, 默認(rèn)是html, append, prepend |
| b-children | <ul b-template="page.list" b-children="li"></ul> |
非必須,配合b-template一起使用, 代表子集的元素,當(dāng)子集里面有其它布局元素干擾的時(shí)候,才做配置, 可以是標(biāo)簽,類名 |
| b-click | <b b-click="page.openDialog"></b> |
點(diǎn)擊事件, openDialog 在 methods 定義. |
| b-target | <div class="parentDom"><b b-click="page.openDialog" b-target=".parentDom"></b></div> |
1.5.2新增 可以控制當(dāng)前this的指向,這樣會(huì)影響到 $index $this 等內(nèi)置值,會(huì)在當(dāng)前往上查找 b-target. 一般用于嵌套的層級(jí)過(guò)深,找不到父級(jí)index使用 |
| b-src | <img b-src="page.imgurl" /> |
1.5.2新增 動(dòng)態(tài)圖片地址 |
| b-href | <a b-href="page.linkurl"></a> |
1.5.2新增 動(dòng)態(tài)跳轉(zhuǎn)地址 |
注意,
b-語(yǔ)法屬性不能在dom動(dòng)態(tài)修改的時(shí)候解析.
行為屬性可以讓你減少手動(dòng)操作dom的機(jī)會(huì), 但卻不是任何時(shí)候都應(yīng)該使用這種屬性, 理解什么是需要改變的數(shù)據(jù)很重要. 比方購(gòu)物車,購(gòu)物車的商品的數(shù)量改變的時(shí)候,需要去重新計(jì)算金額,總數(shù)量,總金額就可以采用這種綁定, 而像商店名稱這些, 應(yīng)該在整個(gè)模板上去處理.
以上內(nèi)容是否對(duì)您有幫助：
更多建議：