Vue.js表单修饰符
2020-05-28 本文已影响0人
爱学习的代代
1、 .lazy 修饰符。 默认情况下，v-model在input事件中同步输入框的值与数据，通过添加修饰符后 v-model.lazy 转变为在change事件中同步
2、.number 修饰符， 可以将用户输入的值，转换成Number类型。
3、 .trim 可以自动过滤用户输入的首尾空格。
1、使用。.lazy修饰符添加后，在input输入框内输入数字的时候，绑定的数据不会发生变化，只有当点击页面其他元素使输入框失焦点的时候会发生变化。
<!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: "请输入姓名："
}
})
</script>
</body>
</html>
2、使用 .number修饰符可以将输入框内的字符串转换成数字
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: "请输入姓名：",
number: "请输入你要转换的数字",
},
methods: {
showMsg: function() {
console.log(this.number);
console.log(typeof(this.number))
}
}
})
</script>
</body>
</html>
3、使用.trim修饰符，可以将输入框内的前后的空格去掉
<!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: "请输入姓名：",
number: "请输入你要转换的数字",
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>
疑问： 不加.trim， input控件一样会自动去掉空格的。
