表单修饰符
==========
## 知识点
* .lazy
* .number
* .trim
### .lazy
用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。
~~~html
用户名：<input v-model.lazy="username">
~~~
### .number
将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。
~~~html
年龄：<input v-model.number="age" type="number">
~~~
### .trim
自动去掉用户输入内容两端的空格。
~~~html
意见：<input v-model.trim="content">
~~~
## 综合例
~~~html
<div id="myApp">
<h1>用户注册</h1>
<div>
<label for="username">用户：</label>
<input type="text" id="username" v-model.lazy="username" @change="checkUsername">
<span v-if="checkUsernameOK">可注册</span>
</div>
<div>
<label for="age">年龄：</label>
<input type="number" id="age" v-model.number="age">
</div>
<div>
<label for="content">个人简介：</label><br/>
<textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
</div>
<h4>信息区</h4>
<p>{{username}}</p>
<p>{{age}}</p>
<p><pre>{{content}}</pre></p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
username: "",
checkUsernameOK: false,
age: "",
content: "",
},
methods: {
checkUsername: function(){
if (this.username.length > 0) this.checkUsernameOK = true;
else this.checkUsernameOK = false;
},
},
});
</script>
~~~
## 源文件
* https://gitee.com/komavideo/LearnVueJS
## 小马视频频道
http://komavideo.com
Vue.js学习工程.zip
需积分: 5 200 浏览量
2024-02-18
20:49:37
上传
评论
收藏 48KB ZIP 举报
Vue.js学习工程.zip （66个子文件） 
LearnVueJS-master Lesson21 
index.html 2KB
README.md 2KB Lesson17 index.html 1KB README.md 1022B Lesson14 index.html 694B README.md 651B Lesson18 index.html 750B README.md 813B Lesson31 index.html 833B README.md 824B Lesson32 index.html 983B README.md 978B Lesson29 index.html 1KB README.md 1KB Lesson28 index.html 705B README.md 671B Lesson11 index.html 760B README.md 673B Lesson26 index.html 670B README.md 698B Lesson02 index.html 530B README.md 544B Lesson01 README.md 759B Lesson22 index.html 1KB README.md 2KB Lesson10 index.html 1KB README.md 1KB Lesson15 index.html 753B README.md 671B Lesson19 index.html 1022B README.md 934B Lesson06 index.html 740B README.md 710B css style.css 225B Lesson20 index.html 1KB README.md 1KB Lesson27 index.html 1KB README.md 1KB Lesson30 index.html 1KB README.md 1KB Lesson04 index.html 552B README.md 533B Lesson24 index.html 637B README.md 659B Lesson25 index.html 1KB README.md 1KB Lesson08 index.html 866B README.md 825B Lesson23 index.html 578B README.md 611B Lesson09 index.html 1KB README.md 1KB Lesson07 index.html 867B README.md 828B Lesson05 index.html 939B README.md 887B Lesson16 index.html 768B README.md 696B README.md 762B Lesson13 index.html 900B README.md 868B Lesson03 index.html 1KB README.md 961B template.html 464B Lesson12 index.html 820B README.md 679B资源评论
