开始绑定样式的学习

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>