Vue的v-model使用

最新推荐文章于 2022-03-30 16:45:33 发布
最新推荐文章于 2022-03-30 16:45:33 发布
阅读量216 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44119864/article/details/103572022
版权

v-model：将json格式的数据以 对象.属性 的方法给value赋值

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <form action="" method="post">
        用户名：<input type="text" name="username" v-model="user.username"><br/>
        密码：<input type="text" name="password" v-model="user.password"><br/>
    </form>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                username: "admin",
                password: "123"
            }
        },
        methods: {}
    });
</script>
</html>

效果：
在这里插入图片描述

night_du
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门--第五天--v-model
weixin_44809439的博客
11-11 120
Vue表单和v-model 官方文档很健全 基本用法 input textarea checkbox radio select form 修饰符 .lazy .number .trim <template> <div id="app"> <input v-model="message" placeholder="edit me"/> <p>Message is: {{message}}</p> <p>
Vue v-model指令
Json的知识梦工厂
07-18 727
技术QQ交流群:294088839   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-model&lt;/title&gt; &lt;script type="text/
vue--v-model指令
Efficiency9的博客
06-04 1432
v-model是表单控件指令 在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责坚挺用户的输入事件来更新数据 以下是代码实践 html+vue <div class="quantity"> <a href="javascript:;" >-</a> <input type="text" value="0" v-model="item.productQ
vue处理json数据的原理_VUE实现原理v-model双向数据绑定原理学习分析
weixin_26789847的博客
01-14 861
1、view视图层实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数2、mode数据层实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 ...
Vue中v-model使用方法
宇智波带土
03-31 2922
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-on:mouseover</title> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
以上就是本文根据给定文件信息所整理的Vue.js中关于v-model和v-text使用过滤器的知识点。通过这些知识点，可以了解到如何在Vue2中定义和使用过滤器，以及如何在不支持直接使用过滤器的上下文中间接实现过滤器的应用...
vue v-model动态生成详解
08-27
Vue V-Model动态生成是 Vue 框架中一种常用的数据绑定方式，但是在某些场景下，使用 V-Model 动态生成时会遇到一些问题，例如在输入框中动态绑定字段名，使用传统的方法 value 动态绑定，并且用子组件绑定向父组件...
Vue v-model组件封装(类似弹窗组件)
10-15
`v-model` 是 Vue 中的一个核心特性，主要用于双向数据绑定，通常用于表单元素如 input、textarea 等。然而，Vue 也允许开发者将 `v-model` 应用于自定义组件，以实现更复杂的交互。 在标准的 `v-model` 使用中，`v...
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以...
Vue基础语法之使用v-model绑定表单元素
wangchaohpu的博客
11-27 1412
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;08_表单输入绑定&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 1. 使
Vue表单输入绑定v-model的使用
qq_18086979的博客
11-01 227
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <form> <!--文本框输入绑
Vue系列教程（10）- Model数据内容双向绑定（v-model）
阿甘兄
06-24 1258
文章目录1. 引言2. Model数据双向绑定3. 表单示例3.1 单行文本3.2 多行文本3.3 单选框3.4 复选框3.5 单选按钮3.6 下拉框 1. 引言 通过前面的章节，我们已经学会了vue的事件绑定，有兴趣的同学可以参阅下： 《Java程序员从零开始学Vue（01）- 前端发展史》 《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》 《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》 《Java程序员从零开始学Vue（04）- VsC
vue里的v-model双向数据绑定
zhuyuan123456的博客
03-03 91
数据双向绑定
浅析 v-model
sinat_38021004的博客
09-11 130
简易的双向绑定 改内存，页面会变化，改页面，内存变化 <template> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <p> <button @click="message ='simpson'">set message to.
v-model命令（双向绑定）
qq_57340195的博客
03-29 191
v-model命令(双向绑定) 格式：v-model="变量" 作用2：获取和设置表单里的值 作用2：表单里输入可以改变变量的值，修改变量可以改变表单的值 <div id="app"> <!--v-model:双向绑定,用户输入按提交可以更改变量的值，用户按修改也可以反向修改-->> <form> 账号：<input type="text" v...
v-model实现原理和sync修饰符
^_^
06-25 282
一、v-model语法糖 input 我们知道v-model能够实现双向绑定，其实他是一个语法糖 <input type="text" v-model="message" /> 如果不用v-model 用下面的方法仍然能够实现双向数据绑定 <input type="text" :value="message" @input="message = $event.target.value" /> :value="message" 是用来绑定message变量的值，通..
深入理解v-model
GHkmmm的个人博客
08-06 270
v-model的实质 <input type="text" v-model="username"> 其实v-model实质上就是一个语法糖，等价于 <input type="text" :value="username" @input="username=$event.target.value"> 相当于对input框的input事件进行了监听，其实在vue的源码中也是这么实现的 想要手写实现 修改props值的问题 在日常开发中，我们经常会遇到需要修改props中的某个值的场
多层嵌套json解析与构建|vuejs初探
热门推荐
cuoban的学习空间
04-26 1万+
出于一些原因，码哥最近接触到了vuejs，不可否认，这个前端框架近来确实特别热。抱着求知的心态，点开了vuejs的官方教程。 理解Vuejs 首先看到的是这么一个定义：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式框架？自底向上增量开发的设计？ 感觉有点新鲜也有点懵逼，于是找到...
Vue数据绑定
Json_book的博客
03-30 1642
Vue数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- Vue中有两种数据绑定方
vue v-model
最新发布
11-14
v-model是Vue框架中的一个指令，用于在表单元素（如input、textarea、select等）和Vue实例的数据之间建立双向绑定关系。它可以监听用户的输入事件，自动更新Vue实例中的数据，并且在某些特殊情况下进行特殊处理。 下面是一个简单的例子，演示了如何使用v-model指令来实现双向数据绑定： ```html <template> <div> <input v-model="message" type="text"> <p>你输入的内容是：{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script> ``` 在上面的例子中，我们使用v-model指令将input元素和Vue实例中的message属性进行了双向绑定。当用户在input元素中输入内容时，Vue会自动更新message属性的值，并且在页面上显示出来。 需要注意的是，v-model指令只能用于表单元素和Vue实例的数据之间建立双向绑定关系，如果需要在其他元素上使用双向绑定，可以使用Vue的计算属性或自定义指令来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值