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属性
目录
相关文章
|
7月前
19avalon - 指令ms-class(类名绑定)
19avalon - 指令ms-class(类名绑定)
25 0
|
7月前
|
JavaScript
24avalon - 指令ms-for(循环绑定)
24avalon - 指令ms-for(循环绑定)
29 0
|
7月前
33avalon - 指令ms-validate(验证绑定)
33avalon - 指令ms-validate(验证绑定)
24 0
|
7月前
|
前端开发 JavaScript
34avalon - 指令ms-effect(动画绑定)
34avalon - 指令ms-effect(动画绑定)
25 0
|
7月前
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
26 0
|
7月前
20avalon - 指令ms-active(active绑定)
20avalon - 指令ms-active(active绑定)
19 0
|
7月前
|
JavaScript
31avalon - 指令ms-rules(验证规则绑定)
31avalon - 指令ms-rules(验证规则绑定)
30 0
|
7月前
|
前端开发
17avalon - 指令ms-css(样式绑定)
17avalon - 指令ms-css(样式绑定)
24 0
|
7月前
13avalon - 指令ms-skip (skip绑定)
13avalon - 指令ms-skip (skip绑定)
28 0
|
7月前
|
前端开发
26avalon - 指令ms-duplex(各表单元素用法)
26avalon - 指令ms-duplex(各表单元素用法)
27 1