19avalon - 指令ms-class(类名绑定)

简介: 19avalon - 指令ms-class(类名绑定)

1.类名绑定用于为元素节点添加几个类名, 因此要求属性值为字符串或字符串数组

2.字符串形式下,可以使用空格隔开多个类名

3.字符串数组形下, 可以在里面使用三元运算符或与或号

示例代码:

<!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',
        aaa: "aaa bbb ccc",
        bbb: 'ddd',
        ccc: ['xxx', 'yyy', 'zzz'],
        ddd: 'eee',
        toggle: true,
        toggle2: false
      })
    </script>
  </head>
  <body ms-controller="test">
    <span :class="@aaa">直接引用字符串</span>
    <span :class="@ccc">直接引用数组</span>
    <span :class="[@aaa, @bbb]">使用数组字面量</span>
    <span :class="['aaa', 'bbb',(@toggle? 'ccc':'ddd')]">选择性添加类名</span>
    <span :class="[@toggle && 'aaa']">选择性添加类名</span>
    <span :class="[ @ddd + 4]">动态生成类名</span>
  </body>
</html>
目录
相关文章
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
65 1
|
JavaScript
24avalon - 指令ms-for(循环绑定)
24avalon - 指令ms-for(循环绑定)
45 0
33avalon - 指令ms-validate(验证绑定)
33avalon - 指令ms-validate(验证绑定)
47 0
14avalon - 指令ms-controller (controller绑定)
14avalon - 指令ms-controller (controller绑定)
51 0
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
52 0
|
JavaScript
31avalon - 指令ms-rules(验证规则绑定)
31avalon - 指令ms-rules(验证规则绑定)
48 0
|
前端开发
26avalon - 指令ms-duplex(各表单元素用法)
26avalon - 指令ms-duplex(各表单元素用法)
48 1
|
6月前
|
C++
Qt定义属性类信息报错‘Qstring‘ was not declared in this scope; did you mean ‘xxx‘?并且还有有一堆报错,问题还出现在moc文件
Qt定义属性类信息报错‘Qstring‘ was not declared in this scope; did you mean ‘xxx‘?并且还有有一堆报错,问题还出现在moc文件
100 0
25avalon - 指令ms-on*(事件绑定)
25avalon - 指令ms-on*(事件绑定)
54 1
|
JavaScript
22avalon - 指令ms-if(if绑定)
22avalon - 指令ms-if(if绑定)
43 0