Vue 3 表单输入绑定

表单输入绑定

实验介绍

你可以用 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() {
    return {
      msg: '',
    };
  },
};
</script>

查看效果如下:

05-08 1906
05-06 2116
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值