16avalon - 指令ms-attr(属性绑定)

简介: 16avalon - 指令ms-attr(属性绑定)

属性绑定用于为元素节点添加一组属性, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为属性名, 键值为属性值为元素添加属性。

示例

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="avalon/dist/avalon.js"></script>
    <script>
      avalon.define({
        $id: 'test',
        obj: {title: '普通 ',algin: 'left'},
        active: {title: '激活'},
        width: 111,
        height: 222,
        arr: [{img: 'aaa'}, {img: 'bbb'}, {img: 'ccc'}],
        path: '../aaa/image.jpg',
        toggle: false,
        array: [{width: 1}, {height: 2}]
      })
    </script>
  </head>
  <body ms-controller="test">
    <span ms-attr="@obj">直接引用对象</span>
    <img ms-attr="{src: @path}" />
    <ul>
      <li ms-for="el in @arr">
        <a ms-attr="{href:'http://www.ccc.xxx/ddd/'+ el.img}">下载</a>
      </li>
    </ul>
    <span :attr="{width: @width, height: @height}">使用对象字面量</span><br/>
    <span :attr="@array">直接引用数组</span><br/>
    <span :attr="[@obj, @toggle && @active ]" :click="@toggle = !@toggle">选择性添加多余属性或重写已有属性</span>
  </body>
</html>

运行结果:

注意

  1. 如果键名如果为for, char这样的关键字,请务必在两边加上引号
  2. 如果键名如果带横杠,请务必转换为驼峰风格或两边加上引号
  3. 不能在ms-attr中设置style属性
目录
相关文章
19avalon - 指令ms-class(类名绑定)
19avalon - 指令ms-class(类名绑定)
61 0
|
JavaScript
24avalon - 指令ms-for(循环绑定)
24avalon - 指令ms-for(循环绑定)
45 0
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
52 0
|
前端开发 JavaScript
34avalon - 指令ms-effect(动画绑定)
34avalon - 指令ms-effect(动画绑定)
41 0
20avalon - 指令ms-active(active绑定)
20avalon - 指令ms-active(active绑定)
43 0
33avalon - 指令ms-validate(验证绑定)
33avalon - 指令ms-validate(验证绑定)
48 0
|
JavaScript
31avalon - 指令ms-rules(验证规则绑定)
31avalon - 指令ms-rules(验证规则绑定)
48 0
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
683 1
|
前端开发
26avalon - 指令ms-duplex(各表单元素用法)
26avalon - 指令ms-duplex(各表单元素用法)
48 1