Vue 双向绑定
devtools工具
使用devtools工具可以让你更加方便的查看到Vue实例中数据的变化。
在chorme商店搜索安装即可。
双向绑定
v-model
双向绑定一般都是与input家族进行绑定。
当表单内容发生改变时，数据层的数据也会发生改变。
<body>
<div id="app">
<input type="text" v-model="v">
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
v:null,
},
})
</script>
</body>
watch监听
使用watch来监听数据的变化。
在watch对象中定义函数，函数名与被监听的数据名相同，它具有两个参数，newValue以及oldValue。
<body>
<div id="app">
<input type="text" v-model="v">
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
v: null,
},
watch: {
v(newValue, oldValue) {
console.log(`${oldValue}=>${newValue}`);
}
}
})
</script>
</body>
表单操作
input&textarea
双向绑定可直接应用于input以及textarea上。
<body>
<div id="app">
<form action="">
<div>
<label for="username">
<p>用户名</p>
<input type="text" id="username" v-model="username">
</label>
</div>
<p></p>
<div>
<label for="concise">
<p>个人简介</p>
<textarea name="" id="concise" rows="10" cols="30" v-model="concise"></textarea>
</label>
</div>
</form>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
username: "",
concise: ""
},
})
</script>
</body>
checkbox单选&多选
如下，你必须同意协议，才能执行下一步：
<body>
<div id="app">
<form action="">
<p>我同意协议<input type="checkbox" v-model="status"></p>
<button :disabled="!status">下一步</button>
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
status: false,
},
});
</script>
</body>
下面是多选的实例，后端返回了一组兴趣爱好，在选择后应该将其id传给后端，使用v-bind绑定id值，使用v-model与传递给后端的choice做绑定：
choice必须是一个Array类型，否则会抛出警告
<body>
<div id="app">
<form action="">
<p v-for="item in hobby">
{{item.name}}<input type="checkbox" v-model="choice" :value="item.id">
</p>
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
choice: [],
hobby: [
{"id": 1, "name": "篮球"},
{"id": 2, "name": "足球"},
]
},
});
</script>
</body>
radio
使用radio时，只要v-model绑定同一数据源，就会产生互斥效果，不需要再指定额外的name属性。
<body>
<div id="app">
<form action="">
<!-- 使用v-bind，将会是int类型，否则是string -->
男<input type="radio" v-model="gender" :value=1>
女<input type="radio" v-model="gender" :value=2>
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
gender: 1,
},
});
</script>
</body>
select单选&复选
使用select来选择你喜欢的城市：
如果是select单选，传递给后端的值就是一个int类型。
如果是select复选，传递给后端的值就是一个Array类型。
<body>
<div id="app">
<form action="">
<select name="" v-model="choice" multiple>
<option :value="item.id" v-for="item in city">{{item.name}}</option>
</select>
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
choice: [],
city: [
{"id": 1, "name": "北京"},
{"id": 2, "name": "上海"},
{"id": 3, "name": "广州"},
],
},
});
</script>
</body>
修饰符
.lazy
使用该修饰符时，绑定的v-model数据源不会实时刷新，而是等到input失去焦点后才会更新。
<body>
<div id="app">
<form action="">
<input type="text" v-model.lazy="userInput">
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
"userInput": "默认值",
},
});
</script>
</body>
.number
使用该修饰符时，当你输入的内容为纯数字时将会自动转为int类型存储再v-model数据源中。
如果不使用该修饰符，则是String类型。
<body>
<div id="app">
<form action="">
<input type="text" v-model.number="userInput">
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
"userInput": "默认值",
},
});
</script>
</body>
.trim
使用该修饰符时，将会自动移除v-model数据源两侧的空格。
<body>
<div id="app">
<form action="">
<input type="text" v-model.trim="userInput">
</form>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
"userInput": "默认值",
},
});
</script>
</body>
实例练习
搭建出一个漂亮的注册页面吧。
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-md-offset-2">
<form action="" method="POST" role="form">
<p></p>
<legend class="text-center">欢迎注册</legend>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" v-model="register.username">
</div>
<div class="form-group">
<label for="age">出生日期</label>
<input type="text" class="form-control" id="age" v-model.number="register.age">
</div>
<div>
<label class="radion-inline" for="male">男
<input type="radio" id="male" value="male" checked="checked" v-model="register.gender">
</label>
<label class="radion-inline" for="female">女
<input type="radio" id="male" value="female" v-model="register.gender">
</label>
</div>
<p></p>
<div class="form-group">
<label for="hobby">兴趣爱好</label>
<select id="hobby" class="form-control" required="required" multiple v-model="register.hobby">
<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">其他</option>
</select>
</div>
<div class="form-group">
<label for="introduction">个人简介</label>
<textarea id="introduction" cols="30" rows="10" class="form-control"
v-model="register.introduction"></textarea>
</div>
<button type="注册" class="btn btn-primary" @click.prevent="post">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
register: {
username: null,
gender: null,
age: null,
hobby: [],
introduction: "",
},
},
methods: {
post() {
console.log(this.register);
}
}
});
</script>
</body>Vue 双向绑定的更多相关文章
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
- Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- 梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
- Vue双向绑定实现原理demo
一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Vue双向绑定原理（源码解析）---getter setter
Vue双向绑定原理 大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...
- Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了
随机推荐
- 记一次完整的PHP代码审计——yccms v3.4审计
一.环境搭建与使用工具 (一)环境搭建 打开源码查看安装要求 PHP 5.4+,Mysql 5.0.*,直接使用phpstudy配置即可 查看源码目录结构,发现是mvc模式的,那么我们重点关注的就是c ...
- JZOJ 5351. 【NOIP2017提高A组模拟9.7】简单无向图
题目大意 给定 \(n\) 个度数为 \(\in [1,2]\) 之间的点,求能组成多少种简单无向图(可不连通,点与点之间有别) 分析 显然答案只与 \(n1,n2\) 有关 那么 \(dp\)?(我 ...
- 教你快速做一个自己的“ChatGPT”
摘要:在国内使用ChatGPT有些不便,是否可以基于OpenAI开放的API做一个给自己或者同事们使用的聊天机器人,甚至集成到更多的场景-. 本文分享自华为云社区<使用 FunctionGrap ...
- CCRD_TOC_2008年第9和第10期
中信国健临床通讯 2008年第9.第10期合刊 目 录 类风湿关节炎 1. 关于RA临床缓解与关节持续破坏相分离现象的一种解释 Brown AK, et al. Arthritis Rheum. ...
- 使用Shapefile C Library读取shp文件并使用OpenGL绘制
1. 概述 坐标数据是空间数据文件的核心,空间数据的数据量往往是很大的.数据可视化是GIS的一个核心应用,绘制海量的坐标数据始终是一个考验设备性能的难题,使用GPU进行绘制可有效减少CPU的负载,提升 ...
- 测开-面试题-Java基础
1 垃圾回收机制? 答: 一.手动垃圾回收机制(C/C++)手动:使用过的对象必须要程序员自己来回收 缺点: 1.若程序员忘记及时回收--对象会一直在内存中,若程序运行时间很长,内存中存在大量垃圾,空 ...
- [网鼎杯2020]boom
[网鼎杯2020]boom 分析 感觉比较友善,主要考查数学运算. 解析 解压之后发现是个exe文件,运行得到一个md5 查询: 输入明文得到: 下个挑战是解三元一次方程: 拿matlab算一下. s ...
- .net core 3.1 上传大文件报错413 Payload Too Large
IIS配置如下 https://www.cnblogs.com/hallejuayahaha/p/12884347.html 代码里面新增 services.Configure<FormOpti ...
- 安装完IDEA后无法打开
安装完IDEA后无法打开 一.现象 安装完IDEA2021.3版本后,无论用什么办法都无法打开 二.原因 原先有安装过idea,里面有加载过一些插件,或者是破解过,会生成一些文件,导致IDEA无法运行 ...
- Centos7安装Docker 及 Docker-compose
1.安装环境 此处在Centos7进行安装,可以使用以下命令查看CentOS版本 lsb_release -a 在 CentOS 7安装docker要求系统为64位.系统内核版本为 3.10 以上,可 ...