Vue基础学习——表单输入元素

最新推荐文章于 2024-06-03 11:24:17 发布

进击的布布

最新推荐文章于 2024-06-03 11:24:17 发布

阅读量216

点赞数

分类专栏： Vue基础系列文章标签： javascript vue.js html 前端前端框架

本文链接：https://blog.csdn.net/bubu212/article/details/121709268

版权

Vue基础系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

V-model

v-model 作用标签表格

<input> <input> <textarea> <select>
type text checkbox radio 无无
监听事件 input change input change
更新数据（元素property） value checked value value

	<input>	<input>	<textarea>	<select>
type	text	checkbox radio	无	无
监听事件	input	change	input	change
更新数据（元素property）	value	checked	value	value

v-model 作用

监听用户交互事件（输入单选多选下拉选）
更新数据

特点

忽略表单元素 value , checked ，selected初始值
v-model 绑定的Vue实例数据作为数据来源
输入法语言（中文，日语.. ) v-model不会更新数据，自行绑定 @input 事件

事件修饰符

lazy

number

trim

表单元素

input

textare

插值语法不生效

单选

复选

选择框（下拉选）

v-model初始未匹配任意值，<select>元素渲染为 ‘’‘未选中’状态

导致IOS系统无法选择第一选项，无法触发change事件

官方文档建议：设置无法选择的第一选项

<div id="example-5">
  <select v-model="selected">
    //设置第一选项 默认不可选
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>