vue 表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦,v-mode! 指令帮我们简化了这一步骤。

<template>
  <div >
    <form>
      请输入：<input type="text" v-model="msg"><br>
     您输入的是： <input type="text" :value="msg">
    </form>
  </div>
</template>

<script>
export default{
  data(){
    return{
       msg: " "
    }
  },
}
</script>

利用v-model可以实现在上面输入框中输入的数据可以直接在下面文本框中显示：

 

复选框

 

template>
  <div >
    <form>
      <p>请选择</p>
      <input type="checkbox" id="checkbox" v-model="checkfalse"><br>
      <label for="checkbox">{{ checkfalse }}</label>
    </form>
  </div>
</template>

<script>
export default{
  data(){
    return{
      checkfalse:false
    }
  },
}
</script>

点击复选框数值发生变化

 

 

修饰符 

.number 表示只接收数字类型数据

.trim 表示获取数据时去除前后空格

.lazy  默认情况下， v-mode 会在每次 input 事件后更新数据。你可以添加azy 修饰符来改为在每次 change 事件后更新数据

<template>
  <div >
    <form>
      <p>请选择</p>
      <input type="checkbox" id="checkbox" v-model.lazy="checkfalse"><br>
      <label for="checkbox">{{ checkfalse }}</label>
    </form>
  </div>
</template>

<script>
export default{
  data(){
    return{
      checkfalse:false
    }
  },
}
</script>