Input binding of vue3 basic form

Form input binding

significance

When processing forms on the front end, we often need to synchronize the content of the form input box to the corresponding variables in JavaScript. Manually connecting value bindings and change event listeners can be cumbersome, v-modeldirectives simplify this step for us

v-model is somewhat similar to two-way binding

<template>
    <h3>表单的输入与绑定</h3>
    <form action="">
    <!--由于输入框的内容与message绑定，所以下面的lable会同步显示-->
        <input type="text" id="input" v-model="message"/>
        <p for="input">{
   
   {message}}</p>
        <!--由于选项框的内容与check绑定，所以下面的lable会同步-->
        <input type="checkbox" id="checkbox" v-model="check"/>
        <label for="checkbox">{
   
   {check}}</label>
    </form>
</template>

<script>
    export default{
      
      
        data() {
      
      
            return{
      
      
                message:"is message",
                check:false
                }
            }
        }
</script>

<style>
</style>

Demo

It can be said to be very convenient

modifier

v-model also provides modifiers: .lazy, .number,.trim

.lazy

By default, data v-modelis updated after each inputevent. You can add lazythe modifier to changeupdate the data after each event instead

Just v-modeladd one after.lazy

<input type="text" id="input" v-model.lazy="message"/>

number

Only accepts numeric types

trim

=“message”/>

### `number`

只接收数字类型

### `trim`

去掉前后空格