首页 > 其他分享 >【前端】学习前端vue框架,了解了什么是v-model

【前端】学习前端vue框架,了解了什么是v-model

时间:2022-11-09 21:31:36浏览次数:47  
标签:vue 前端 绑定 input model 数据 message 元素

什么是v-model呢?

v-model指令可以在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 所以,应该通过 JavaScript 在组件的 data 选项中声明初始值。

什么是双向数据绑定?

代码实例:

<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
  <input type="text" v-model="message">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊!'
    }
  })
</script>
</body>
</html>

message的数据改变,input输入框中的数据会随之变化。input输入框中的数据变化了,message的数据也会改变 v-model其实是一个语法糖,它背后的本质是两个操作 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 这个在vue.js文档里面有详细的说明。

标签:vue,前端,绑定,input,model,数据,message,元素
From: https://blog.51cto.com/u_15312559/5838760

相关文章

  • 使用vue ui可视化工具创建vue项目时,卡住不动,无法创建
    最近使用vue可视化工具创建vue项目时,一直卡住不动,无法创建,也设置了淘宝镜像,很困惑,最后终于解决。根据以下路径找到以下文件(我的node.js是默认安装在了c盘)  打开此......
  • JFinal--Model
    ActiveRecord:ActiveRecord是JFinal最核心的组成部分之一,通过ActiveRecord来操作数据库,将极大地减少代码量,极大地提升开发效率。  ActiveRecord模式的核心是:......
  • Vue项目报错object null is not iterable (cannot read property Symbol(Symbol.itera
    参考:https://blog.csdn.net/A535366/article/details/122408747原因是在项目中使用es6语法...解构时,如果遇到数组数据为null时,导致null对象无法解构成数组,导致报错 ......
  • VUE 获取PDF文档流直接打印
    一、项目需求前端点击按钮直接调起打印对应pdf文档。 二、踩坑刚开始通过api获取后端给的PDF地址,创建一个隐藏的iframe标签src设置为pdf地址;前端通过获取隐......
  • vue项目中禁用浏览器缓存配置案例
    项目发布新版本,部署线上后用户浏览器需要清理缓存1.public文件夹中修改index.html文件meta配置<metahttp-equiv="Cache-Control"content="no-cache,no-store,must-......
  • 前端上传图片时添加水印
    前段时间有个功能需要上传图片并添加水印,于是就查了些资料,但是大部分都不太适用,或者说没反应。先说下需要用到的,canvas,添加水印,只能用这个去创建画布,把文字平铺到画布上......
  • 关于前端:如何实现并发请求数量控制?
    原文地址: https://juejin.cn/post/7163522138698153997//并发请求函数constconcurrencyRequest=(urls,maxNum)=>{returnnewPromise((resolve)=>{......
  • springboot+vue前后端分离国际化
    一,概要前端使用vue-i18n框架来实现国际化功能,国际化数据存储在数据库里,由后端接口提供,使用pinia缓存。后端使用redis缓存,并使用拦截器对响应中的提示信息做国际化。二......
  • 前端路由
    1.路由基本概念和原理(1)路由本质:对应关系后端路由:根据不同用户URL请求,返回不同内容        本质:URL请求地址与服务器资源之间的对应关系前端路由:根......
  • Vuex中actions如何优雅处理接口请求
    前言在项目开发中,如果使用到了vuex,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在actions中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重......