v-model.trim ->去除首尾空格
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input @keyup="fn" v-model.trim="username" type="text"><br>
<input @keyup="fn" v-model="username" type="text">
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
fn() {
console.log(this.username)
}
}
})
</script>
</body>
</html>v-model.number ->转数字
使用js中的{{ expression }}在html上动态的显示数据，再使用typeof来获取类型显示到页面上
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.processed {
background-color: lightblue;
}
.unprocessed {
background-color: lightyellow;
}
</style>
</head>
<body>
<div id="app">
<h3>使用 v-model.number 处理：</h3>
<input v-model.number="username1" type="text" class="processed">
<p class="processed">输入的值（经过 v-model.number 处理）：{{username1}}，类型：{{typeof username1}}</p>
<h3>未处理：</h3>
<input v-model="username2" type="text" class="unprocessed">
<p class="unprocessed">输入的值（未处理）：{{username2}}，类型：{{typeof username2}}</p>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username1: '',
username2: ''
}
});
</script>
</body>
</html>
