表单修饰符
==========
## 知识点
* .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学习 课程详细 什么是Vue.js? 从index.html开始 条件与循环 处理用户输入 按钮事件 组件 过滤器 计算属性 观察属性 设定机算属性 Class绑定 Class对象绑定 条件渲染 元素显示v-show 列表渲染 JS对象迭代 事件处理器 表单控件绑定 表单复选框 表单单选按钮 表单下拉框 表单修饰符 组件:基础的基础 组件:局部的组件 组件:表行组件 组件:数据 组件:传递数据 组件:传递变量 组件:参数验证 组件:事件传递 组件:slot插槽 组件:组合slot
资源推荐
资源详情
资源评论























收起资源包目录






































































































共 68 条
- 1
资源评论



hhzz
- 粉丝: 9166
- 资源: 44
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制
