vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3表单输入绑定

vue3表单输入绑定方式

作者：ps酷教程

这篇文章主要介绍了vue3表单输入绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

初识表单输入绑定

vue3可以帮助我们将vue定义的变量绑定到html表单元素上，并且监听到html表单元素修改值时，会将对应的vue定义的变量修改。

<!-- 将vue3定义的text绑定给inut元素, 当input元素发生input输入事件时, 将修改vue3定义的text -->
<input  :value="text" @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤（与上面完全一样的效果）：

<input v-model="text">

v-model 还可以用于各种不同类型的输入

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

这些html原生的表单元素 和 v-model之间 实现了，把vue定义的响应式变量绑定给了表单元素的值，同时，通过监听对应表单的对应事件（为了监测到修改的值），获取到修改后的值，把值更新到vue定义的响应式变量中，这样就实现了双向绑定。自定义组件如果要支持v-model，那么也需要这样去做这2部分

基本用法

input

在这里插入图片描述

<div class="main-box">
    <p>Message is: {{ msg }}</p>
    <input v-model="msg" placeholder="edit me" />
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let msg = ref('a')
</script>

textarea

在这里插入图片描述

注意：要加上下面的样式，才有换行效果哦

<div class="main-box">
    <p style="white-space: pre-line;">{{ msg }}</p>
    <textarea v-model="msg"></textarea>
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let msg = ref('a')
</script>

checkbox

单个复选框

在这里插入图片描述

单个的复选框，绑定的是布尔类型值

<div class="main-box">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let checked = ref(true)
</script>

多个复选框

在这里插入图片描述

多个复选框绑定的是同一个数组或集合的值

<div class="main-box">
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let checkedNames = ref(['Mike'])
</script>

radio

在这里插入图片描述

<div class="main-box">
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let picked = ref('Two')
</script>

select

单选

在这里插入图片描述

option中里面没有value值，但还是默认选择了B

<div class="main-box">
    <div>Selected: {{ selected }}</div>
    <select v-model="selected">
	    <option disabled value="">Please select one</option>
	    <option>A</option>
	    <option>B</option>
	    <option>C</option>
    </select>
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let selected = ref('B')
</script>

多选

在这里插入图片描述

<div class="main-box">
    <div>Selected: {{ selected }}</div>
    <select v-model="selected" multiple>
        <option v-for="option in options" 
        	    :value="option.value" 
        	    :key="option.value">
            {{ option.text }}
        </option>
    </select>
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let selected = ref('A')
	let options = ref([
	    { text: 'One', value: 'A' },
	    { text: 'Two', value: 'B' },
	    { text: 'Three', value: 'C' }
	])
</script>

值绑定

通过以上基本用法，我们发现：对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)，但有的时候，我们希望表单元素绑定的值是组件实例上的动态数据。

这可以通过使用 v-bind 来实现。

此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

在这里插入图片描述

单个复选框默认绑定的是布尔值，可以通过vue特有的 attributes，来绑定值。

甚至可以使用v-bind绑定组件实例身上的动态的值

<div class="main-box">
    <input 	type="checkbox" 
    		v-model="toggle" 
    		true-value="yes" 
    		:false-value="no" />
    {{toggle}}
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let no = ref('nonono~')
</script>

单选框

在这里插入图片描述

<div class="main-box">
    <p>{{ pick }}</p>
    <input type="radio" v-model="pick" :value="first" />1
    <input type="radio" v-model="pick" :value="second" />2
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let first = ref('第一')
	let second = ref('第二')
	let pick = ref('')
</script>

选择器

在这里插入图片描述

<div class="main-box">
    <p>{{ selected }}</p>
    <select v-model="selected">
        <!-- 绑定 内联对象字面量 -->
        <option :value="{ number: 123 }">123</option>
    </select>
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let selected = ref()
</script>

修饰符

.lazy

在这里插入图片描述

当输入完，并且input焦点时，即触发了change事件，然后msg才会修改。

而不是原来的：边输入，它会实时的边改

<div class="main-box">
    <p>{{ msg }}</p>
    <!-- 在 "change" 事件后同步更新而不是 "input" -->
    <input v-model.lazy="msg" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let msg = ref()
</script>

.number

如果你想让用户输入自动转换为数字，可以在 v-model 后添加

.number 修饰符来管理输入number 修饰符会在输入框有 type=“number” 时自动启用

<div class="main-box">
	<input v-model.number="age" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let age = ref()
</script>

.trim

如果想要默认自动去除用户输入内容中两端的空格，可以在 v-model 后添加 .trim 修饰符

<div class="main-box">
	<input v-model.trim="msg" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let msg= ref()
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文