99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

BUI 模板語法

2020-08-11 14:37 更新

數(shù)據(jù)改變的時(shí)候應(yīng)該做什么事情, 這是通過行為屬性去綁定的.

行為屬性語法

屬性名 語法示例 語法描述
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"/> 雙向綁定,會把當(dāng)前值,設(shè)置到value屬性,并監(jiān)聽value的改變,改變又會重新設(shè)置 page.size 的值
b-bind <b b-bind="page.attrs"></b> 設(shè)置屬性, key值為屬性名, 結(jié)果: <b title="我是動態(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可以是對象,也可以是字符串,或者是布爾值
b-template <ul b-template="page.list"></ul> 綁定模板,page.list的數(shù)據(jù)更新會及時(shí)反應(yīng)到頁面上
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的指向,這樣會影響到 $index $this 等內(nèi)置值,會在當(dāng)前往上查找 b-target. 一般用于嵌套的層級過深,找不到父級index使用
b-src <img b-src="page.imgurl" /> 1.5.2新增 動態(tài)圖片地址
b-href <a b-href="page.linkurl"></a> 1.5.2新增 動態(tài)跳轉(zhuǎn)地址

注意, b-語法屬性不能在dom動態(tài)修改的時(shí)候解析.

行為屬性可以讓你減少手動操作dom的機(jī)會, 但卻不是任何時(shí)候都應(yīng)該使用這種屬性, 理解什么是需要改變的數(shù)據(jù)很重要. 比方購物車,購物車的商品的數(shù)量改變的時(shí)候,需要去重新計(jì)算金額,總數(shù)量,總金額就可以采用這種綁定, 而像商店名稱這些, 應(yīng)該在整個(gè)模板上去處理.

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號