Vue3（4）表單提交，input的雙向數據綁定

雙向數據綁定

提交表單引入一個很實用的指令 v-model

  <div id="app">
    <h1>{{msg}}</h1>
    <form action="" @submit.prevent="post">
      <input type="text" v-model="msg">
      <button>提交表單</button>
    </form>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          msg: "hello world"
        }
      },
      methods: {
        post(){
          console.log(this.msg)
        }
      },
    }).mount("#app")
  </script>

@submit后面的 .prevent 是事件修飾符
.prevent 阻止事件提交時刷新頁面
.number 數據類型是Number
.lazy 失去焦點時再發生改變
.trim 去除首尾的空格