Vue知识点总结(5)——v-model(超级详细)
2023-09-11 14:18:53 时间
今天的内容是v-model
双向数据绑定是Vue的灵魂特点之一,v-model是完美的体现了Vue双向绑定的特点。
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected,attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
文本
<div id="app">
<p>{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
你在输入框中输入的东西会很快的渲染到上方的p标签中,这样就完整了一个最基本的数据的双向绑定,非常的简单也非常的实用。
多行文本
<div id="app">
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
效果和单行文本相同,输入的内容会被立即绑定到message上,并渲染到页面上
复选框
<div id="app">
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="Ray" value="Ray" v-model="names">
<label>Ray</label>
<input type="checkbox" id="Creator" value="Creator" v-model="names">
<label>Creator</label>
<input type="checkbox" id="Code" value="Code" v-model="names">
<label>Code</label>
</p>
<p>{{names}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
names:[],
}
});
</script>
当我们对选项进行选择时,所选的内容会被立即绑定到names中,并以很快的速度渲染到页面上。
单选框
<div id="app">
<h3>单选框绑定</h3>
<p>
<input type="radio" id="m" value="男" v-model="sex">
<label>男</label>
<input type="radio" id="w" value="女" v-model="sex">
<label>女</label>
</p>
<p>{{sex}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
sex:''
}
});
</script>
效果和复选框基本类似,选择选项后,所选内容被绑定到sex,然后渲染在页面上。
除此之外,v-model还有一些修饰符
- .lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步: - .number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符: - .trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符
<div id="app">
<p>{{message}}</p>
v-model的修饰符:
<p>v-model.lazy(懒加载):<input type="text" v-model.lazy="message" /></p>
<p>v-model.number(只绑定数字):<input type="text" v-model.number="message" /></p>
<p>v-model.trim(去空格至1个):<input type="text" v-model.trim="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
大家可以实际操作一下,看一下修饰符各自的功能,还是比较方便的。
v-model在处理表单输入绑定时,非常的方便、简单、灵活,大家多多尝试一下,可以试一下做个登录注册的小demo。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!
相关文章
- Vue笔记:vue-router
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3:用qrcode-parser解析二维码图片(vue@3.2.36 / qrcode-parser@2.0.4)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue elementui el-select通过@Change触发事件
- 用vue实现一个仿简书的轮播图效果
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue——模板语法
- 023:vue+openlayers加载本地KML文件 (代码示例)
- 一文教会你如何运行vue项目
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
- vue知识点
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等