vue3-表单输入绑定

表单输入绑定

获取表单输入的值方式：

1. 手动连接值绑定和更改事件监听器

2. v-model 指令 （常用）

<script?lang="ts"?setup>
import?{?ref?}?from?"vue"
//?定义个变量接收输入的内容：
const?text?=?ref("111")
const?text2?=?ref("222")

</script>

<template>
????<div?class="container">
????????<section>
????????????<!--?输入内容通过事件绑定值：?-->
????????????<p>默认的value是?111</p>
????????????<input?:value="text"?@input="event?=>?text?=?event?.target?.value"?/>
????????????<div>这是输入的值{{?text?}}</div>
????????</section>

????????<section>
????????????<!--?v-model?指令帮我们简化了这一步骤?-->
????????????<p>默认的value是?222</p>
????????????<input?v-model="text2"?value="888">
????????????<div>这是输入的值{{?text2?}}</div>
????????</section>

????</div>
</template>

<style?lang="scss"?scoped>
.container?{
????section?{
????????margin-bottom:?20px;
????}
}
</style>

示例：

v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

表单类型	绑定属性值	绑定事件
input	value	input
textarea	value	input
checkbox	checked	change
radio	checked	change
select	value	change

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

比如下面 888 值不显示 无效的

<input?v-model="text2"?value="888">

表单基本用法

1. 文本

2. 多行文本

3. 复选框

4. 单选按钮

5. 选择器

<script?lang="ts"?setup>
import?{?ref?}?from?"vue"
//?定义个变量接收输入的内容：
const?f1?=?ref("f1的默认值")
const?f2?=?ref("f2的默认值")
const?f3?=?ref(true)
const?f4?=?ref([])
const?f5?=?ref('女')
const?f6?=?ref('深圳')

</script>

<template>
????<div?class="container">
????????<section>
????????????<p>input输入框</p>
????????????<p>f1的值是:?{{?f1?}}</p>
????????????<input?v-model="f1"?placeholder="请输入"?/>
????????</section>

????????<section>
????????????<p>多行文本</p>
????????????<!--?错误?-->
????????????<!--?<textarea>{{?text?}}</textarea>?-->
????????????<p>f2的值是:?{{?f2?}}</p>
????????????<!--?正确?-->
????????????<textarea?v-model="f2"?rows="3"></textarea>
????????</section>

????????<section>
????????????<p>复选框</p>
????????????<p>单个</p>
????????????<input?type="checkbox"?id="checkbox"?v-model="f3"?/>?<label?for="checkbox">统一协议</label>
????????????<br>
????????????<label?for="checkbox">f3的值是：{{?f3?}}</label>
????????????<br>
????????????<br>
????????????<p>多个</p>
????????????<input?type="checkbox"?id="h1"?value="篮球"?v-model="f4"?/>?<label?for="h1">篮球</label>
????????????<input?type="checkbox"?id="h2"?value="足球"?v-model="f4"?/>?<label?for="h2">足球</label>
????????????<input?type="checkbox"?id="h3"?value="排球"?v-model="f4"?/>?<label?for="h3">兵乓球</label>
????????????<br>
????????????<label?for="checkbox">f4的值是：{{?f4?}}</label>
????????</section>

????????<section>
????????????<p>单选按钮</p>
????????????<p>f5的值是：?{{?f5?}}</p>
????????????<input?type="radio"?id="one"?value="男"?v-model="f5"?/>
????????????<label?for="one">男</label>

????????????<input?type="radio"?id="two"?value="女"?v-model="f5"?/>
????????????<label?for="two">女</label>
????????</section>

????????<section>
????????????选择器
????????????<div>f6的值是?:?{{?f6?}}</div>

????????????<select?v-model="f6"?multiple>
????????????????<option?disabled?value="">请选择一个你喜欢的城市</option>
????????????????<option>北京</option>
????????????????<option>上海</option>
????????????????<option>深圳</option>
????????????????<option>广州</option>
????????????</select>

????????</section>

????</div>
</template>

<style?lang="scss"?scoped>
.container?{
????section?{
????????margin-bottom:?20px;
????}

????label?{
????????margin-right:?10px;
????}

????select?{
????????margin:?20px;
????????padding:?20px;
????}
}
</style>

示例：

复选框 true-value 和 false-value 属性

<input
??type="checkbox"
??v-model="toggle"
??true-value="yes"
??false-value="no"?/>

??//?动态渲染
<input
??type="checkbox"
??v-model="toggle"
??:true-value="dynamicTrueValue"
??:false-value="dynamicFalseValue"?/>

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。

• 这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：

选择器，非字符串类型的值绑定

...
...

const?selected?=?ref({?number:?111?})
...
...

<section>
?????<p>selected?的值是:{{?selected?}}</p>
?????<select?v-model="selected">
?????????<!--?内联对象字面量?-->
?????????<option?:value="{?number:?111?}">111</option>
?????????<option?:value="{?number:?222?}">222</option>
?????</select>
?</section>

示例：

修饰符

• .lazy 每次 change 事件后更新数据 （节流）

• .number 用户输入自动转换为数字

• .trim 自动去除用户输入内容中两端的空格

<!--?在?"change"?事件后同步更新而不是?"input"?-->
<input?v-model.lazy="msg"?/>

<input?v-model.number="age"?/>

<input?v-model.trim="msg"?/>