v-model修饰符

<!DOCTYPE html>
<html>
<head>
<title>组件</title>
<meta charset="utf-8" />

</head>
<body>
　　<div id="app">
　　　　<!--.laze修饰符 可以让数据在失去焦点或者回车才会更新-->
　　　　<input type="text" v-model.lazy="message">
　　　　<h2>{{message}}</h2>
　　　　<!--number修饰符 让输入框内容自动转换成数字类型-->
　　　　<input type="number" v-model.number="age">
　　　　<h2>{{age}}---{{typeof age}}</h2>
　　</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
<script>//定义一个Vue组件component
　　const app=new Vue({
　　　　el:"#app",
　　　　data:{
　　　　　　message:'你好啊',
　　　　　　age:''
　　　　}
　　})


</script>
</body>
</html>

posted @ 2020-10-23 17:03  眰  阅读(96)  评论(0)    收藏  举报