vue中v-model的三种修饰符:lazy,numer,trim
lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新<input type="text" id="inp" v-model.lazy="message">使用lazy可以使数据不需要多次重写,减少消耗。在默认情况下,在输入框中无论我们输入的是字母还是数字,都是会被当做是字符串类型进行处理number 修饰符: 使输入框中输入的内容自动转换为数字类型<inpu
·
lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新
<input type="text" id="inp" v-model.lazy="message">
使用lazy可以使数据不需要多次重写,减少消耗。
在默认情况下,在输入框中无论我们输入的是字母还是数字,都是会被当做是字符串类型进行处理
number 修饰符: 使输入框中输入的内容自动转换为数字类型
<input type="text" name="" id="age" v-model.number="age">
trim 修饰符: 过滤掉内容左右两边的的空格
<input type="text" name="" id="str" v-model="str">
浏览器显示空格会默认过滤掉,但是里面的数据并没有过滤
<input type="text" name="" id="str" v-model.trim="str">
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<label for="inp">
<!-- lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新 -->
<input type="text" id="inp" v-model.lazy="message">
</label>
<br>
<!-- 在默认情况下,在输入框中无论我们输入的是字母还是数字,都是会被当做是字符串类型进行处理 -->
<!-- number 修饰符: 使输入框中输入的内容自动转换为数字类型 -->
<label for="age">
<input type="text" name="" id="age" v-model="age">
</label>
<br>
<!-- trim 修饰符: 过滤掉内容左右两边的的空格 -->
<label for="str">
<input type="text" name="" id="str" v-model.trim="str">
</label>
<br>
<h2>您输入的字符:{{str}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
message: '你好!',
age: 10,
str: ''
}, //定义数据
methods: {}, //定义函数
computed: {},//定义计算函数
filters: {},//
});
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)