您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 表单输入绑定

《和小米一起学Vue.js》— 表单输入绑定

[ 孤狼 | 2022-07-30 00:07:36 | Vue | 1243°C | 0条评论 ]

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

TIP:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。  


v-model

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

text 和 textarea 元素使用 value 属性 和 input 事件;  
checkbox 和 radio 使用 checked 属性 和 change 事件; 
select 字段将 value 作为 prop 并将 change 作为事件。  

TIP:对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。  

input

<div>
<p>{{Text1}}</p>
<input type="text" v-model="Text1">
</div>

textarea

<div>
<p>{{text2}}</p>
<textarea v-model="text2"></textarea>
</div>

radio

如果v-model使用了同一个变量,则radio自动互斥,无需写name互斥

<div>
<p>{{radiovalue}}</p>
<label for="r0">0<input id="r0" type="radio" value="0" v-model="radiovalue"></label>
<label for="r1">1<input id="r1" type="radio" value="1" v-model="radiovalue"></label>
<label for="r2">2<input id="r2" type="radio" value="2" v-model="radiovalue"></label>
</div>

checkbox

注意:单个checkbox值为布尔值,多个checkbox的值应该为数组类型  

<div>
<p>{{checkvlaues}}</p>
<label for="cs1">cs1<input type="checkbox" value="true" v-model="checkvlaues"></label>
</div>
<div>
<p>{{checkvalue}}</p>
<label for="c0">c0<input type="checkbox" value="c0" v-model="checkvalue"></label>
<label for="c1">c1<input type="checkbox" value="c1" v-model="checkvalue"></label>
<label for="c2">c2<input type="checkbox" value="c2" v-model="checkvalue"></label>
</div>

select

当select为多选模式时,对应的值应该为数组类型

<div>
<p>{{selectvalue}}</p>
<select v-model="selectvalue">
<option value="">默认</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

<div>
<p>{{selectvalue2}}</p>
<select v-model="selectvalue2" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>


案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 表单输入绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<p>{{Text1}}</p>
<input type="text" v-model="Text1">
</div>
<div>
<p>{{text2}}</p>
<textarea v-model="text2"></textarea>
</div>
<div>
<p>{{radiovalue}}</p>
<label for="r0">0<input id="r0" type="radio" value="0" v-model="radiovalue"></label>
<label for="r1">1<input id="r1" type="radio" value="1" v-model="radiovalue"></label>
<label for="r2">2<input id="r2" type="radio" value="2" v-model="radiovalue"></label>
</div>
<div>
<p>{{checkvlaues}}</p>
<label for="cs1">cs1<input type="checkbox" value="true" v-model="checkvlaues"></label>
</div>
<div>
<p>{{checkvalue}}</p>
<label for="c0">c0<input type="checkbox" value="c0" v-model="checkvalue"></label>
<label for="c1">c1<input type="checkbox" value="c1" v-model="checkvalue"></label>
<label for="c2">c2<input type="checkbox" value="c2" v-model="checkvalue"></label>
</div>
<div>
<p>{{selectvalue}}</p>
<select v-model="selectvalue">
<option value="">默认</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<p>{{selectvalue2}}</p>
<select v-model="selectvalue2" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>


</div>
<script>
let ndata={
Text1:'hello',
text2:'wo',
radiovalue:'1',
checkvlaues:false,
checkvalue:[],
selectvalue:'',
selectvalue2:['2'],
};
const app=new Vue({
el:"#app",
data:ndata
});
</script>
</body>
</html>




修饰符

.lazy

取代 input 监听 change 事件,在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步。

<div>
<p>{{text1}}</p>
<input type="text" v-model.lazy="text1">
</div>


.number

输入字符串转为有效的数字,如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符。这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

<div>
<p>{{text2}}</p>
<input v-model.number="text2" type="number">
</div>


.trim

输入首尾空格过滤,如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符。

<div>
<p>{{text3}}</p>
<input type="text" v-model.trim="text3">
</div>



案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 修饰符</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<p>{{text1}}</p>
<input type="text" v-model.lazy="text1">
</div>
<div>
<p>{{text2}}</p>
<input v-model.number="text2" type="number">
</div>
<div>
<p>{{text3}}</p>
<input type="text" v-model.trim="text3">
</div>
</div>
<script>
let ndata={
text1:'hello',
text2:123,
text3:'',
};
const app=new Vue({
el:"#app",
data:ndata
});
</script>
</body>
</html>






转载请注明出处:http://gl.paea.cn/n.php?n=177
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索