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 去除首尾的空格