avalon怎样控制input样式
展开全部
对于视图样式的更新，有以下两种方式：
1、对css的指定属性进行更新
通过avalon中的ms-css-XXX属性，可以在ms-duplex更新vm对象值的的同时，实现对视图样式中指定属性的动态更新。
代码示例：
[html] view plain copy
<div class="panel1" ms-css-width="weight">
<input ms-duplex="weight"></input>
</div>
通过该段代码，实现通过input输入值的变化，动态改变div标签视图样式的width属性。
2、对标签所使用的css类进行更新
通过avalon中的ms-class属性，可以通过input等控件，动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。
代码示例：
avalon代码：
[javascript] view plain copy
<script>
var model=avalon.define({
$id:"test",
style:"panel1",
change_class:function(e){
model.style=model.style==="panel1"?"panel2":"panel1"
}
})
html代码：
[html] view plain copy
<body ms-controller="test">
<div ms-class="{{style}}" ></div>
<button ms-click="change_class">点我改变类名</button>
</body>
以上代码实现的功能是通过点击button控件，改变div标签的类。点一下变成panel1类，再点一下变成panel2类
1、对css的指定属性进行更新
通过avalon中的ms-css-XXX属性，可以在ms-duplex更新vm对象值的的同时，实现对视图样式中指定属性的动态更新。
代码示例：
[html] view plain copy
<div class="panel1" ms-css-width="weight">
<input ms-duplex="weight"></input>
</div>
通过该段代码，实现通过input输入值的变化，动态改变div标签视图样式的width属性。
2、对标签所使用的css类进行更新
通过avalon中的ms-class属性，可以通过input等控件，动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。
代码示例：
avalon代码：
[javascript] view plain copy
<script>
var model=avalon.define({
$id:"test",
style:"panel1",
change_class:function(e){
model.style=model.style==="panel1"?"panel2":"panel1"
}
})
html代码：
[html] view plain copy
<body ms-controller="test">
<div ms-class="{{style}}" ></div>
<button ms-click="change_class">点我改变类名</button>
</body>
以上代码实现的功能是通过点击button控件，改变div标签的类。点一下变成panel1类，再点一下变成panel2类
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
