avalon2的ms-css的變革思路與ms-attr一樣，將多個操作合並成到一個對象里面處理，因此沒有ms-css-name="value"，只有ms-css="Object"或ms-css="Array".
注意，當你用對象字面量的方式傳參時，注意存在－號的鍵名要用“”號括起來。
這個會報錯.正確寫法是以下兩種
在avalon1.*系列，允許你在屬性值中加入插值表達式，如
ms-css-width=”prop”(會自動補px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px 這些在avalon2中都不支持，它頂多幫你的樣式加上廠商前綴，駝峰化，對數字屬性加上px。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="./dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
background: "red"
})
</script>
</head>
<body>
<div ms-controller="test">
<div style="width:200px; height:50px"
ms-css="{background: @background}">
</div>
<select ms-duplex="@background">
<option value="red">紅</option>
<option value="yellow">黃</option>
<option value="green">綠</option>
</select>
</div>
</body>
</html>
我們來看另一個動畫效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./dist/avalon.js" ></script>
<script>
var vm = avalon.define({
$id: "test",
percent: 0
})
var a = true
var id = setInterval(function() {
if (a) {
if (vm.percent < 100) {
vm.percent++
} else {
a = false
}
} else {
if (vm.percent > 0) {
vm.percent--
} else {
a = true
}
}
}, 100)
</script>
<style>
.handerx{
width:20px;
height:20px;
position: absolute;
color:#fff;
background: #000;
}
.sliderx{
width:100%;
height:20px;
position: relative;
}
.body{
padding:40px;
}
</style>
</head>
<body ms-controller="test" class="body">
<div class="slider" style="background:red;">
<div class="handerx" ms-css="{left: @percent+'%'}" >{{ @percent }}</div>
<div style="background: greenyellow;height:20px" ms-css="{width:@percent+'%'}"></div>
</div>
<div class="sliderx" style="background:#d2d2d2;">
<div style="background: #2FECDC;height:20px" ms-css="{width:100-@percent+'%'}"></div>
</div>
</body>
</html>
最后看一下與ms-duplex結合使用的例子
<html>
<head>
<title>ms-css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="./dist/avalon.js" ></script>
<script>
var vm = avalon.define({
$id: "test",
w: 100,
h: 100,
click: function () {
vm.w = vm.w + 10;
vm.h = vm.h + 10;
}
})
</script>
</head>
<body>
<div ms-controller="test">
<div style=" background: #a9ea00;" ms-css='{width:@w,height:@h}' ms-click="@click"></div>
<p>{{ @w }} x {{ @h }}</p>
<!--change過濾器相當於原來data-duplex-event='change'-->
<p>W: <input type="text" ms-duplex-number="@w|change" /></p>
<p>H: <input type="text" ms-duplex-number="@h" /></p>
</div>
</body>
</html>
如果讀者一口氣看了N篇教程，建議馬上到GITHUB里下avalon.js 的源碼，動手試試。多看不如多碼，那樣才是成功的學習方式。