<!--
* @Description:
* @Autor: leechoy
* @Date: 2022-01-16 18:53:38
* @IDE: Visual Studio Code
-->
<!DOCTYPE html>
<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">
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- 表单修饰符 number -->
<input v-model.number="age" type="text" />
<input type="button" value="运算" @click='calculate' />
</div>
<div>
<!-- 表单修饰符 trim -->
<input v-model.trim="name" type="text" />
<input type="button" value="运算" @click='calculateLength' />
</div>
<div>
<!-- 表单修饰符 lazy 表单失去焦点触发 -->
<input v-model.lazy="des" type="text" />
<div>
{{des}}
</div>
</div>
</div>
</body>
<script>
const vm = {
data() {
return {
age: '',
name: '',
des: ''
}
},
methods: {
calculate: function() {
console.log(this.age * 13);
},
calculateLength: function() {
console.log(this.name.length);
}
}
}
Vue.createApp(vm).mount('#app');
</script>
</html>
