开始绑定样式的学习

2 years ago · 443eb58261
parent 25e2b297a5
commit 443eb58261
1 changed files with 48 additions and 0 deletions
--- a/10_绑定样式/绑定样式.html
+++ b/10_绑定样式/绑定样式.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>样式绑定</title>
+    <style>
+      .basic {
+        width: 400px;
+        height: 100px;
+        border: 1px solid black;
+      }
+      .happy {
+          background-color: bisque;
+      }
+      .sad {
+          background-color: blue;
+      }
+      .normal {
+          background-color: orange;
+      }
+      .test1 {
+          background-color: blueviolet;
+      }
+      .test2 {
+          background-color: chartreuse;
+      }
+      .test3 {
+          background-color: brown;
+      }
+    </style>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+
+</body>
+  <div id="root">
+    <div class="basic">{{name}}</div>
+  </div>
+  <script type="text/javascript">
+    Vue.config.productionTip = false
+    new Vue({
+      el: "#root",
+      data:{
+        name: '测试',
+      }
+    })
+  </script>
+</html>