开发者社区云计算文章正文

19avalon - 指令ms-class（类名绑定）

2023-10-24 25

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>