Vue 3 表单输入绑定

同名公众号 - 人生代码

于 2020-10-18 16:39:45 发布

阅读量1.2k

点赞数

分类专栏： Vue3 + TS 进阶之路文章标签： js checkbox html epoll vue

本文链接：https://blog.csdn.net/qq_36772866/article/details/109153126

版权

Vue3 + TS 进阶之路专栏收录该内容

129 篇文章 29 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue 3中v-model在表单元素如text、textarea、checkbox、radio、select上的应用，包括单个和多个输入绑定、动态选项渲染、值绑定以及修饰符的使用，提供了丰富的示例和注意事项。

摘要由CSDN通过智能技术生成

表单输入绑定

实验介绍

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

文本 (Text)

话不多说，来看看例子吧：

<template>
  <div class="template-m-wrap">
    <div id="inline-handler">
      <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
      <input v-model="msg" placeholder="edit me"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {