接着上个笔记走：https://www.jianshu.com/p/858c44be2b9c
使用在上个笔记中新建的 vuetest 文件夹来进行操作
image.png

纠错：需要注意的是 vue.js 的引用一定要在 body 之前否则会出现一些显示的小 bug

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Vue双向绑定和条件判断</title>
  7.     <script src="vue.js"></script>
  8.     <style type="text/css">
  9.      :root {
  10.         --span-color: red;
  11.     }
  13.     span {
  14.         color: var(--span-color);
  15.     }
  16.     </style>
  17. </head>
  19. <body>
  20.     <!-- 双向绑定 -->
  21.     <!-- <div id="app">
  22.         <h1>{{ message }}</h1>
  23.         <input type="text" v-model="message">
  25. <pre>
  26.             {{ $data | json }}
  27.         </pre>
  28. </div> -->
  29.     <!-- 条件判断 -->
  30.     <div id="app">
  31.         <!-- v-if 直接把 <p> 给干掉了  v-show 是 css 控制显示隐藏的 -->
  32.         <!--  <p v-if="!message"> -->
  33.         <p v-shoiw="!message">
  34.             <span>**请务必输入用户名信息！**</span>
  35.         </p>
  36.         <input type="text" v-model="message">
  38. <pre>
  39.             {{ $data | json }}
  40.         </pre>
  41. </div>
  42.     <script>
  43.     // console.log(Vue);
  44.     new Vue({
  45.         el: "#app",
  46.         data: {
  47.             message: ""
  48.         }
  49.     });
  50.     </script>
  51. </body>
  53. </html>