1、 .lazy 修飾符。 默認(rèn)情況下，v-model在input事件中同步輸入框的值與數(shù)據(jù)混弥，通過(guò)添加修飾符后 v-model.lazy 轉(zhuǎn)變?yōu)樵赾hange事件中同步
2、.number 修飾符对省， 可以將用戶輸入的值蝗拿，轉(zhuǎn)換成Number類型。
3蒿涎、 .trim 可以自動(dòng)過(guò)濾用戶輸入的首尾空格哀托。
1、使用劳秋。.lazy修飾符添加后仓手，在input輸入框內(nèi)輸入數(shù)字的時(shí)候胖齐，綁定的數(shù)據(jù)不會(huì)發(fā)生變化，只有當(dāng)點(diǎn)擊頁(yè)面其他元素使輸入框失焦點(diǎn)的時(shí)候會(huì)發(fā)生變化嗽冒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單的修飾符</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model.lazy="name">
<p>{{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: "請(qǐng)輸入姓名："
}
})
</script>
</body>
</html>
2呀伙、使用 .number修飾符可以將輸入框內(nèi)的字符串轉(zhuǎn)換成數(shù)字
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單的修飾符</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model.lazy="name">
<p>{{ name }}</p>
<input v-model.number="number">
<p v-on:click="showMsg">{{ number }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: "請(qǐng)輸入姓名：",
number: "請(qǐng)輸入你要轉(zhuǎn)換的數(shù)字",
},
methods: {
showMsg: function() {
console.log(this.number);
console.log(typeof(this.number))
}
}
})
</script>
</body>
</html>
3、使用.trim修飾符添坊，可以將輸入框內(nèi)的前后的空格去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單的修飾符</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- .lazy修飾符 -->
<input v-model.lazy="name">
<p>{{ name }}</p>
<!-- .number修飾符 -->
<input v-model="number">
<p v-on:click="showMsg">{{ number }}</p>
<!-- trim修飾符 -->
<input v-model.trim="search_text">
<p v-on:click="showContent"> {{ search_text }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: "請(qǐng)輸入姓名：",
number: "請(qǐng)輸入你要轉(zhuǎn)換的數(shù)字",
search_text: "要搜索的文本"
},
methods: {
showMsg: function() {
console.log(this.number);
console.log(typeof(this.number))
},
showContent: function() {
console.log( "a" + this.search_text)
}
}
})
</script>
</body>
</html>
疑問(wèn)： 不加.trim剿另， input控件一樣會(huì)自動(dòng)去掉空格的。
