Vue.js — 表单输入绑定

Z时代
2024-01-10
分类：综合

vue

1.表单输入绑定

你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。

1.1 文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<!-- 文本 -->
			<input v-model="message1" placeholder="编辑...">
			<p>单行文本：{{ message1 }}</p>
			<!-- 多行文本 -->
			<textarea v-model="message2" placeholder="编辑..."></textarea>			
			<p style="white-space: pre-line;">多行文本：{{ message2 }}</p>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					message1: '',
					message2: ''
				}
			})
        </script>
    </body>
</html>

1.2 复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<!-- 单个复选框 -->
			<input type="checkbox" >
			<label for="checkbox">{{ checked }}</label>
			<br/><br/>
			<!-- 多个复选框 -->
			<input type="checkbox" >
			<label for="jack">Jack</label>
			<input type="checkbox" >
			<label for="john">John</label>
			<input type="checkbox" >
			<label for="mike">Mike</label>
			<br/><br/>
			<span>选中的名字：{{ checkedNames }}</span>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					checked: true,
					checkedNames: []
				}
			})
        </script>
    </body>
</html>

1.3 单选按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<input type="radio" >
			<label for="one">One</label>			
			<input type="radio" >
			<label for="two">Two</label>
			<br>
			<div style="margin: 5px;">选中的：{{ picked }}</div>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					picked: ''
				}
			})
        </script>
    </body>
</html>

1.4 选择框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<select v-model="selected">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>选择的：{{ selected }}</span>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					selected: ''
				}
			})
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<select v-model="selected">
				<option v-for="option in options" v-bind:value="option.value">
					{{ option.text }}
				</option>
			</select>
			<span>选择的：{{ selected }}</span>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					selected: 'A',
					options: [
						{text: 'One', value: 'A'},
						{text: 'Two', value: 'B'},
						{text: 'Three', value: 'C'},
					]
				}
			})
        </script>
    </body>
</html>

1.5 值绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）。

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<!-- `toggle` 为 true 时选中，`toggle` 为 false 时未选中 -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<!-- 复选框 -->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
<script>
	// ...
	// 当选中时
	vm.toggle === 'yes'
	// 当没有选中时
	vm.toggle === 'no'
</script>

1.6 修饰符

.lazy

.number

.trim

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<input v-model.lazy="message1" placeholder="编辑...">
            <p>单行文本：{{ message1 }}</p>
			<input v-model.number="age" type="number">
			<p>{{ typeof age }}</p>
			<input v-model.trim="msg">
			<p>{{ msg }}</p>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					message1: '',
					age: 0,
					msg: ''
				}
			})
        </script>
    </body>
</html>