【基础】双响数据绑定

双响数据绑定

• 双响绑定

  • html

  <div id="app">
      <input type="text" v-model="message">
      <h1>{{message}}</h1>
  </div>
  

  • js

  <script>
      // 初始化数据
      window.onload = function () {
          var vue = new Vue({
              el: '#app',
              data: {
                  message: 'Hello vue!'
              }
          });
      };
  </script>
  

• 取消双向绑定

  • html

  <div id="app">
      <input type="text" v-model="msg">
      <br> 双向绑定数据：{{msg}}
      <br> HTML双向绑定：
      <span v-html="msg"></span>
  </div>
  

  • js

  <script>
      // 初始化数据
      window.onload = function () {
          // vue
          new Vue({
              el: '#app',
              data: {
                  msg: '初始化数据'
              }
          });
      };
  </script>