版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89328349
CSS绑定用于为元素节点添加一组样式, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为样式名, 键值为样式值为元素添加样式
示例
代码：
<!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: {backgroundColor: '#3bb0d0',width:300, height:50, 'text-align': 'center'},//属性名带-,必须用引号括起
active: {color: 'red'},
width: 300,
height: 60,
toggle: true,
array: [{width:100},{height:50},{border: '1px solid #5cb85c'}]
})
</script>
</head>
<body ms-controller="test">
<div ms-css="@obj">直接引用对象</div>
<div :css="{width: @width, height: @height,background: 'pink'}">使用对象字面量</div>
<div :css="@array">直接引用数组</div>
<div :css="[@obj, @toggle && @active ]" :click="@toggle = !@toggle">选择性添加多余属性或重写已有属性</div>
</body>
</html>
运行结果：
注意
- 如果键名为表示长宽,字体大小这样的样式, 那么键值不需要加单位,会自动加上px
- 如果键名如果为float,请务必在两边加上引号
- 如果键名如果为font-size,请务必转换为驼峰风格或两边加上引号