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

Vue指令之v-model

调了半天没反应,结果是没引用Vue,我是伞兵。

v-model的作用是将视图与数据双向绑定。一般情况下,Vue是数据驱动的,即数据发生改变后网页就会刷新一次,更改对应的网页内容,即数据单向绑定了网页内容。而使用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>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><div id="app"><label>用户名:<input type="text" v-model="username" placeholder="请输入用户名"></label> <br><!--br是换行符--><button @click="reset">重置</button></div><script>const app = new Vue({el: "#app",data:{username: ""},methods:{reset(){this.username = ""}}})</script></body>
</html>

在这个例子中,直接修改数据或者在输入框里输入内容都会直接的影响另一方的数据。
在这里插入图片描述

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

相关文章:

  • 信息系统项目管理师——第11章项目成本管理(重要)
  • SpringMVC常见面试题
  • golang 和java对比
  • 基于pear-admin-flask 的 flask 使用教程
  • Android 开发投屏软件
  • .Net Web窗口页属性
  • 渐变色x轴换行柱状图
  • 源支付V7开源版2.99,修复各种提示错误
  • Mysql中的那些锁
  • 如何在Linux系统部署ONLYOFFICE协作办公利器并实现多人实时编辑文档
  • Linux部署Sonarqube+Gogs+Jenkins(一)
  • 程序员开发技术整理(持续整理中)
  • Java并查集详解(附Leetcode 547.省份数量讲解)
  • 【MySQL】DQL-基础查询-语句&演示(查询多个字段 / 所有字段/并设置别名/去重)
  • 更新一条SQL的执行流程
  • 深入理解nginx mp4流媒体模块[上]
  • Go 之 Gin 框架
  • vue3+threejs新手从零开发卡牌游戏(二十一):添加战斗与生命值关联逻辑
  • Linux内核err.h文件分析
  • Qt 富文本处理 (字体颜色大小加粗等)
  • 消息队列的七种经典应用场景
  • uniapp 微信小程序 canvas 手写板文字重复倾斜水印
  • JavaScript如何制作轮播图
  • 【面试经典150 | 动态规划】零钱兑换
  • 什么是防火墙,部署防火墙有什么好处?
  • 学习鸿蒙基础(10)
  • 阿里云对象存储OSS入门
  • [幻灯片]软件需求设计方法学全程实例剖析-03-业务用例图和业务序列图
  • ctfshow-web入门-xxe
  • Docker数据卷挂载