Vue学习笔记之09-v-model双向绑定

v-model的基本使用

在input框中添加指令, v-model, 值为需要绑定的data数据
这样的话, 修改input框中的内容, data中的内容也会响应式改变

<div id="app"><input type="text" v-model="message">{{message}}</div><script>const app = new Vue({el: "#app",data: {message: "你好呀"}})</script>

v-model的原理

v-model其实是一个语法糖, 它的背后本质是包含两个操作
- 1. v-bind绑定一个value属性
- 1. v-on 指令给当前元素绑定input事件

<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" :value="message" @input="message = $event.target.value">

v-model结合radio的使用

在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果
在使用v-model绑定radio单选按钮到data数据中的时候, 每次点击单选按钮都会将单选按钮是否选择传入data数据中, 已选传入true, 没选则传入false

<div id="app"><label for="male"><!-- 在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果 --><input type="radio" id="male" v-model="sex" value="男">男</label><label for="female"><input type="radio" id="female" v-model="sex" value="女">女</label><h2>{{sex}}</h2></div><script>const app = new Vue({el: "#app",data: {sex: ""}})</script>

v-model结合checkbox使用

结合单选checkbox使用
- 与单选checkbox结合使用的时候, 一般给绑定的data数据声明为boolean值, 记录单选框是否有被选中
结合多选checkbox使用
- 与多选checkbox结合使用的时候, 一般给绑定的data数据声明为一个数组, 因为每次点击checkbox的时候,如果选中则会将其value值传入data数据, 如果没有选中, 则会将对应的data数据删除, 这样就可以记录用户选择了什么

<div id="app"><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</label><h2>您的选择是: {{isAgree}}</h2><button :disabled="!isAgree">下一步</button><br><input type="checkbox" v-model="hobby" value="篮球">篮球<input type="checkbox" v-model="hobby" value="乒乓球">乒乓球<input type="checkbox" v-model="hobby" value="羽毛球">羽毛球<input type="checkbox" v-model="hobby" value="网球">网球<h2>您的爱好有: {{hobby}}</h2></div><script>const app = new Vue({el: "#app",data: {isAgree: false, //单选框绑定为boolean值hobby: [] // 多选框绑定为一个数组}})</script>

v-model的值绑定

实质上就是动态地给value赋值
在真实开发中, input的值是从服务器中获取或者定义在data中的
所以要通过v-bind:value动态地给value绑定值

<div id="app"><!-- v-model的值绑定概念 --><!-- 遍历请求来的数据创建input --><label v-for="item in orginHobby" :for="item"><!-- 通过v-model将input绑定在用于记录用户选择的数据中 --><input type="checkbox" :id="item" :value="item" v-model="hobby">{{item}}</label></div><script>const app = new Vue({el: "#app",data: {hobby: [],  // 这里是用于记录用户选中的数据的orginHobby: ["篮球", "乒乓球", "羽毛球", "网球", "高尔夫球", "台球"] // 这里可以看作是从服务器中请求来的需要渲染在页面上的数据}})</script>

v-model结合select使用

select单选
- v-model绑定的是一个值
- 当选中option中的一个时, 就会将它的value值传入绑定的data中
select多选
- 用multiple属性将select转换为多选
- v-model绑定的是一个数组
- 当选中多个值的时候, 就会将选中的option传入绑定的data数组中

<div id="app"><select name="frult" v-model="frult"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>你选择的水果是: {{frult}}</h2><!-- select设置为多选 用multiple属性 --><select name="frults" v-model="frults" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>你选择的水果有: {{frults}}</h2></div><script>const app = new Vue({el: "#app",data: {frult: "苹果", // 如果是单选的select 就设置为一个字符串就好了frults: [] // 如果是多选的select 就设置为一个数组}})</script>

v-model的修饰符

lazy修饰符
- 默认情况下, v-model默认是在input事件中同步输入框的数据的
- 也就是说数据一旦发生变化, data中的数据就会立即变化, 这样会降低性能
- 在v-model指令加上lazy修饰符, 就可以让data数据在input框失去焦点或者用户敲下回车的时候才会更新
number修饰符
- 默认情况下,在输入框中无论用户输入的是字符串还是数字, 存储在data中的时候都会被Vue转换为字符串类型
- 如果想要处理的是数字类型, 那么最好将内容存储为数字类型
- number修饰符可以将传入的内容转成数字类型
trim修饰符
- 如果输入的内容首尾有空格, 我们希望去除的话
- trim修饰符可以过滤内容左右两边的空格

<div id="app"><!-- 1.修饰符: lazy --><input type="text" v-model.lazy="message"><h2>{{message}}</h2><!-- 2.修饰符: number --><input type="number" v-model.number="age"><h2>{{age}} {{typeof age}}</h2><!-- 3.修饰符: trim --><input type="text" v-model.trim="name"><h2>{{name}}</h2></div><script>const app = new Vue({el: "#app",data: {message: "",age: 0,name: ""}})</script>

Vue学习笔记之09-v-model双向绑定相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
【Vue.js】Vue 学习笔记
概念: 渐进式框架: "渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分." "大概就是你不必一开始就用Vue所有的全家桶,根据场景, ...
千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...

Vue学习笔记之09-v-model双向绑定

v-model的基本使用

v-model的原理

v-model结合radio的使用

v-model结合checkbox使用

v-model的值绑定

v-model结合select使用

v-model的修饰符

Vue学习笔记之09-v-model双向绑定相关推荐

最新文章

热门文章