ng-class2

最新推荐文章于 2019-09-02 16:36:10 发布

python基础教程

最新推荐文章于 2019-09-02 16:36:10 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏：流行框架node

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/56288735

流行框架node 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用 Angular 的 ng-class 指令实现颜色切换的例子。通过下拉菜单选择不同的背景颜色，页面上的 div 元素将平滑过渡到所选颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>ng-class2 </title>
        <style>
            .red{background-color:#001122;}
            .green{background-color:gray;}
            #box{
                width: 200px;
                height: 200px;
                transition:background-color 1s ease;
            }
        </style>
    </head>
    <body>
        <select ng-model="style" id="">
            <option value="red">红色</option>      
            <option value="green">绿色</option>      
        </select>
        <!-- <div id="box" ng-class="style"></div> -->
        <div id="box" ng-class="{red:style=='red',green:style=='green'}"></div>
        <script src="bower_components/angular/angular.js"></script>

    </body>
</html>