<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!--
语法:
.number 只能输入数值类型
.trim 去除左右两端空格
.lazy 离焦事件才触发,当用户输入完成之后,失去焦点才触发
说白了,就是鼠标点到别的地方后才触发-->
请输入数值: <input type="text" v-model.number="num" />
<br />
<button @click="addNum()">计算</button>
<hr />
用户名:<input type="text" v-model.trim="username" />
<button @click="nameSize">长度</button>{{length}}
<hr />
<input type="text" v-model.lazy="msg" />{{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
num: '',
username: '',
length: 0,
msg: ''
},
methods: {
addNum() {
//this.num = parseInt(this.num) + 20
this.num += 20
},
nameSize() {
this.length = this.username.length
}
}
})
</script>
</body>
</html>
Vue的单表修饰符
最新推荐文章于 2024-04-12 11:01:11 发布