表单修饰符

知识点

  • .lazy
  • .number
  • .trim

.lazy

用户输入内容时不做绑定数据的更新处理,在控件的onchange事件中更新绑定的变量。

  1. 用户名:<input v-model.lazy="username">

.number

将用户输入的内容转换为数值类型,如果用户输入非数值的时候,则返回NaN。

  1. 年龄:<input v-model.number="age" type="number">

.trim

自动去掉用户输入内容两端的空格。

  1. 意见:<input v-model.trim="content">

综合例

  1. <div id="myApp">
  2. <h1>用户注册</h1>
  3. <div>
  4. <label for="username">用户:</label>
  5. <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
  6. <span v-if="checkUsernameOK">可注册</span>
  7. </div>
  8. <div>
  9. <label for="age">年龄:</label>
  10. <input type="number" id="age" v-model.number="age">
  11. </div>
  12. <div>
  13. <label for="content">个人简介:</label><br/>
  14. <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
  15. </div>
  16. <h4>信息区</h4>
  17. <p>{{username}}</p>
  18. <p>{{age}}</p>
  19. <p><pre>{{content}}</pre></p>
  20. </div>
  21. <script>
  22. var myApp = new Vue({
  23. el: '#myApp',
  24. data: {
  25. username: "",
  26. checkUsernameOK: false,
  27. age: "",
  28. content: "",
  29. },
  30. methods: {
  31. checkUsername: function(){
  32. if (this.username.length > 0) this.checkUsernameOK = true;
  33. else this.checkUsernameOK = false;
  34. },
  35. },
  36. });
  37. </script>

源文件

小马视频频道

http://komavideo.com