前端學習(1560):ng-class顏色切換

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ng-app指令</title>
    <style>
        .red {
            background-color: red;
        }
        
        .green {
            background-color: green;
        }
        
        #box {
            height: 200px;
            width: 200px;
            transition: background-color 1s ease;
        }
    </style>
</head>
<!-- 需要angular的代碼必須包裹在ng-app的代碼中 -->
<!-- ng-bind遇到html的時候會轉義 爲了安全 -->

<body ng-app>
    <select ng-model="style">
      <option value="red">紅色</option>
      <option value="green">綠色</option>
  </select>
    <div id="box" ng-class="style"></div>
    <script src="./js/Angular.js"></script>
    <!-- 隔行換色 -->
    <script>
    </script>
</body>

</html>

運行結果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章