模板语法

数据改变的时候应该做什么事情, 这是通过行为属性去绑定的.

行为属性语法

属性名 语法示例 语法描述
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 判断类的处理
Copyright ©2017-2022 easybui.com all right reserved,powered by Gitbook该文件修订时间: 2023-11-23 13:55:44

results matching ""

    No results matching ""