ng-class

最新推荐文章于 2025-09-13 21:59:18 发布

转载最新推荐文章于 2025-09-13 21:59:18 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiudongjie/p/6700706.html

文章标签：

#json

本文介绍了一种使用JSON和数组进行元素样式的动态绑定方法。通过输入框和复选框动态改变元素的样式属性，实现文字颜色、粗细及中划线效果的变化。此方法适用于前端开发中需要动态调整样式的情况。

//json
<p ng-class="{red:a,text:b,dec:c}">Test Demo</p>
<input type="checkbox" ng-model="a">红 <br>
<input type="checkbox" ng-model="b">粗 <br>
<input type="checkbox" ng-model="c">中划线 <hr>
//
<p ng-class=style>Test Demo</p>
<input type="text" ng-model="style"><hr>
//数组
<p ng-class="[style1,style2,style3]">Test Demo</p>
<input ng-model="style1" placeholder="red text or dec" aria-label="red text or dec"> <br>
<input ng-model="style2" placeholder="red text or dec" aria-label="red text or dec">粗 <br>
<input ng-model="style3" placeholder="red text or dec" aria-label="red text or dec">中划线 <hr>
//json和数组
<p ng-class="[style4,{ora:d}]">Test Demo</p>
<input ng-model="style4" placeholder="text or dec" aria-label="text or dec"> <br>
<input type="checkbox" ng-model="d">