当前位置: 首页 > news >正文

Vue的双向绑定v-model详细介绍

使用:

比如用户在登录注册时需要提交账号密码;

比如用户创建,更新时,需要提交一些数据;

v-model指令可以在表单 input、textarea以及select元素上创建双向绑定;

它会根据控件类型自动选取正确的方法来更新元素;

<div id="app"><input type="text" v-model="message" /><h2>{{ message }}</h2>
</div>
  • v-本质上不过是语法糖而已, 那么它是什么的语法糖它是监听到函数中,函数会获取最新的值赋值到绑定的属性中; 
  •  
    <div id="app"><input type="text" :value="message" @input="changeValue" /><h2>{{ message }}</h2>
    </div>
    

    我们再来绑定一下其他的表单类型:textarea、checkbox、radio、select

  • <div id="app"><textarea id="" cols="30" rows="10" v-model="content"></textarea><p>textarea的内容是: {{ content }}</p>
    </div>
    

http://www.lryc.cn/news/331361.html

相关文章:

  • AWS入门实践-S3对象存储的基本用法
  • el-tree-v2渲染树形大数据并设置默认展开
  • 损失函数篇 | YOLOv8更换损失函数之MPDIoU(23年7月首发论文)
  • 【力扣】200.岛屿数量(染色法DFS深搜)
  • 达梦配置ODBC连接
  • 独孤思维:高客单价项目,必须来一个
  • 学习java第三十二天
  • 力扣150. 逆波兰表达式求值
  • hololens 2 投屏 报错
  • 初次在 GitHub 建立仓库以及公开代码的流程 - 公开代码
  • 论文笔记 - :MonoLSS: Learnable Sample Selection For Monocular 3D Detection
  • LVS、HAProxy
  • 开发环境->生产环境
  • 基于AI智能识别技术的智慧展览馆视频监管方案设计
  • Leetcode-894-所有可能的真二叉树-c++
  • Django DRF视图
  • SQLite全文搜索引擎:实现原理、应用实践和版本差异
  • day17-二叉树part04
  • 书生浦语第一次课
  • UE小:UE5.3无法创建C++工程
  • FFmpeg获取视频详情
  • find: paths must precede expression
  • RabbitMQ3.x之九_Docker中安装RabbitMQ
  • vue快速入门(四)v-html
  • 第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟
  • C++ 2024-4-1 作业
  • 【滑动窗口】Leetcode 串联所有单词的子串
  • golang channel实践代码及注意事项
  • 面试题:RabbitMQ 消息队列中间件
  • wpf中引用自定义字体