BUI 模板語法

2020-08-11 14:37 更新

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

行為屬性語法

屬性名 語法示例 語法描述
b-text <b b-text="page.size"></b> 設置文本,一般使用 b 標簽
b-html <div b-html="page.size"></div> 設置html,html一般使用div標簽
b-value <input b-value="page.size"/> 設置value, b-value屬性,必須是input標簽
b-show <b b-show="page.isShow"></b> 顯示當前dom, page.isShow=false; 則控制不顯示. 初始化的時候是隱藏,則設置 <b b-show="!page.isShow"></b>
b-model <input b-model="page.size"/> 雙向綁定,會把當前值,設置到value屬性,并監(jiān)聽value的改變,改變又會重新設置 page.size 的值
b-bind <b b-bind="page.attrs"></b> 設置屬性, key值為屬性名, 結果: <b title="我是動態(tài)標題"></b>
b-style <b b-style="page.styles"></b> 設置style的樣式, key值為樣式屬性, 結果: <b style="color:red;border:1px solid #ddd"></b>
b-class <b b-bind="page.classNames"></b> 設置class的樣式, 結果: <b class="active"></b>, classNames可以是對象,也可以是字符串,或者是布爾值
b-template <ul b-template="page.list"></ul> 綁定模板,page.list的數(shù)據(jù)更新會及時反應到頁面上
b-command <ul b-template="page.list" b-command="append"></ul> 非必須,配合b-template一起使用,代表第一次模板渲染采用什么方法, 默認是html, append, prepend
b-children <ul b-template="page.list" b-children="li"></ul> 非必須,配合b-template一起使用, 代表子集的元素,當子集里面有其它布局元素干擾的時候,才做配置, 可以是標簽,類名
b-click <b b-click="page.openDialog"></b> 點擊事件, openDialog 在 methods 定義.
b-target <div class="parentDom"><b b-click="page.openDialog" b-target=".parentDom"></b></div> 1.5.2新增 可以控制當前this的指向,這樣會影響到 $index $this 等內置值,會在當前往上查找 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)跳轉地址

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

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

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號