Vue.js中的v-model指令(双向绑定)
Vue.js中v-model的作用
- v-model的作用和使用场景
- 1.v-model的作用--双向绑定
- 2.v-model双向绑定的使用场景——表单
- 3.总结
v-model的作用和使用场景
你好!Vue.js作为现在最为常用的前端框架之一,经常会使用到“双向绑定”这一概念。今天我们就对Vue中的“双向绑定”这一核心特性进行一个简单的说明。
1.v-model的作用–双向绑定
单向绑定 ,非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。
双向绑定,如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
v-model是vue的一个语法糖,用于表单控件或者在组件上创建双向绑定。
2.v-model双向绑定的使用场景——表单
以下是v-model使用的代码片段:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vueApp</title>
</head><body><div id="app"><input type="button" value="修改message" @click="changeMsg"><br><input type="text" v-model="message" @keyup.enter="getMsg"><h2>{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "干就完事了!"},methods: {getMsg: function () {alert(this.message);},changeMsg: function () {this.message = "干不动了啊!"}}});</script>
</body></html>
在网页中显示如下:
代码中的输入框使用了v-model,当我们点击“修改message”按钮时,触发changeMsg函数,改变了Model中数据message的值,从而使View发生变化。如果只是这样,就是我们熟悉的单向绑定。
敲黑板,接下来重点来了,它真的来了。我们此时修改输入框的值,发现{{message}}的值也会实时变化,比如输入“我还行!”,回车,触发getMsg函数,弹出“我还行!” 。也可以在浏览器的console中输入window.app.message查看,发现Model中message的值确实随着View的更新也自动更新了。
3.总结
1、v-model指令的作用是使绑定的数据和表单元素的值相互关联,即双向绑定。
2、v-model的使用场景是表单,用于便捷地设置和获取表单元素的值
Vue.js中的v-model指令(双向绑定)相关推荐
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
- Vue.js 2.x笔记:指令(4)
1. 内置指令 指令是Vue.js 中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM 行为. Vue.js 本身提供了大量的内置指令来进行对DOM 的操作,同时可以开发自定义指令. 2. ...
- 如何使用Vue.js中的set设置对象属性值
1.问题背景 使用vue初始化一个对象v,并在data中初始化一个空对象obj,然后使用Vue.set()给对象obj添加属性 2.实现源码 <!DOCTYPE html> <htm ...
- echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了 在 webpack 中使用 EChar ...
- vue.js中mock本地json数据
vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
最新文章
- sudo命令 和限制root 远程登陆
- centos7查看当前端口_Centos7 防火墙开放端口,查看状态,查看开放端口
- 万能无线键盘对码软件_Ceke M87蓝牙机械键盘拆解评测 - Mac小伴侣
- 如何将网页保存为图片_网页账号密码该如何保存?
- python方法定义..._解析Python类中的方法定义
- Python网络编程——使用TCP方式传输文件
- python移动文件中某个内容_如何在Python中移动文件
- OpenCV4每日一练day11:单目位姿估计
- lucene索引并搜索mysql数据库[转]
- hadoop component summary
- wps里的茶色字体怎么设置_如何添加WPS字体 - 卡饭网
- Vue 使用vue-json-excel 实现导出Excel
- 关系图谱在反欺诈场景中的应用及实践
- 逻辑删除(通俗易懂)
- 【贪玩巴斯】一文通过操作实例——学会 知网专业检索 2022年3月21日
- 腾讯网上共享excel使用总结
- xxx is out of date错误
- 已知曲线上三点,如何求中间一点的法向量。
- 解决VUE [WDS] DISCONNECTED 错误
- datawhale学习小组 Task4:方差分析