模板语法
数据改变的时候应该做什么事情, 这是通过行为属性去绑定的.
行为属性语法
| 属性名 | 语法示例 | 语法描述 |
|---|---|---|
| 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 属性,并监听 value 的改变,改变又会重新设置 page.size 的值 |
| b-bind | <b b-bind="page.attrs"></b> |
设置属性, key 值为属性名, 结果: <b title="我是动态标题"></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 的数据更新会及时反应到页面上 |
| 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 新增 动态图片地址 |
| b-href | <a b-href="page.linkurl"></a> |
1.5.2 新增 动态跳转地址 |
| b-placeholder | <input b-placeholder="page.placeholder"></input> |
1.7.0 新增 占位文本 |
| b-title | <a b-title="page.title"></a> |
1.7.0 新增 标题属性 |
| b-model-lazy | <input b-model-lazy="page.size"/> |
1.7.0 新增 blur 失去焦点的时候才会设置值 |
| b-trigger | <input b-model="page.size" b-trigger="page.getSize"/> |
1.7.0 新增 实时修改的时候触发某个方法 |
| b-data-xxx | <div b-data-title="page.title"></div> |
1.8.5 新增 自定义属性，相当于 data-title="value" |
| b-bind-title | <div b-bind-title="page.title"></div> |
1.8.5 新增, 增加 b-bind 的灵活性 |
| b-color,b-width,b-height,b-background,b-border | <div b-color="page.color"></div> |
1.8.5 新增, 增加 b-style 的灵活性, 相当于 style="color:xxx" |
| b-cloak | <div b-cloak></div> |
1.8.5 优化，渲染完才会展示 |
| b-if，b-else-if, b-else | <div b-if="(pages.role=='admin')">admin</div><div b-else-if="(pages.role=='manager')">manager</div><div b-else>guest</div> |
1.9.0 新增 b-if 判断类的处理, b-else-if, b-else 必须跟 b-if 同级 |
| b-switch, b-case, b-default | <div b-case="(pages.role)"><div b-case="admin">admin</div><div b-case="manager">manager</div><div b-default>guest</div></div> |
1.9.0 新增 b-switch 判断类的处理 |