v-model相当于一个语法糖

最新推荐文章于 2023-06-19 08:30:00 发布
最新推荐文章于 2023-06-19 08:30:00 发布
阅读量556 收藏
点赞数
分类专栏： vue语法及使用 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24871849/article/details/109479427
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" :value="title" @input="onInput">
        <!-- <input :value="title" @input="title = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price
        <div>
            {{title}}
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue(
            {
                el:"#app",
                data() {
                    return {
                        title:"hello vue"
                    }
                },
                methods:{
                    onInput(e) {
                        console.log(e);
                        this.title = e.target.value;
                    }
                }
            }
        )
    </script>

</body>
</html>

v-model其实相当于一个语法糖，这里不使用语法糖实现v-model的功能

sheerhr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
Vue3.0（3）：v-model
weixin_41897680的博客
07-18 741
v-model 双向绑定 这里只说在组件上的使用 v-model官方文档 2.0 在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件 实例1 //父组件 <template> <div> <el-input v-model="msg" placeholder="请输入"></el-input> <model-test-1 v-model="msg"></model-te
vue2和vue3中的v-model使用
古月水告的博客
01-29 1442
今天重新翻看了vuejs文档，看到v-model的有关使用，想到vue2和vue3中有些不同，今天在这里整理下两个的使用。首先看到v-model，大多数小伙伴都会想到“响应式”、“双向绑定”，v-model 确实是实现了双向绑定数据，用过vue的人都比较熟悉。v-model 是 Vue 内置的指令,vue2和vue3中的v-model使用有点不太一样，那具体是哪里不一样呢？
vue2和vue3组件v-model区别
老电影故事的博客
06-19 1678
单向数据流，父组件传给子组件的数据，子组件只能展示，不能修改，如果需要修改则需要emit事件让父组件修改有些时候，一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用，但是存在value另有含义，或者不能使用input触发的情况，这时候我们就不能使用v-model进行简写了。就比如说选择框，绑定的值是checked而不是value，接收事件不是input而是change。为了解决这个问题，尤雨溪在Vue2.2中，引入了model组件选项。
v-model 相当于一个v-on和一个v-bind的叠加
abcsimple的博客
11-02 146
<!DOCTYPE html> <HTML> <head> <meta charset="utf"> <title>v-model原理</title> </head> <body> <div id="app"> <input type="text" :value="mess.
Vue循环中多个input绑定指定v-model实例
10-14
主要介绍了Vue循环中多个input绑定指定v-model实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jsx-v-model-一个Babel插件，将v-model引入JSX。-Vue.js开发
05-27
用法：npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件：{“ presets”：[“ es2015”]，“ plugins”：[“ jsx-v-model“，” transform-vue-jsx“]}代码：Vue....
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是...v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
关于vue的v-model的自己理解（用于自己复习）
suyongsimple的专栏
06-07 5611
关于vue的v-model的自己理解 1.在一般使用情况下，v-model为： &amp;lt;input v-model=&quot;searchText&quot;&amp;gt; 等价于 &amp;lt;input v-bind:value=&quot;searchText&quot; v-on:input=&quot;searchText = $event.target.value&quot;&amp;g
v-model的使用以及原理
qq_39285162的博客
11-13 417
v-model的使用以及原理 vue中的v-model主要是用于表单元素和数据的绑定。除了在input中使用，也可在textarea中使用。 方法一： <div id="app"> <input type="text" v-model="message" /> <h2>{{message}}</h2> </div> <script src="./js/vue.js"></script> <script&.
vue篇-v-model原理、v-model修饰符
liumuye88888的博客
05-30 500
v-model其实是一个语法糖,相当于两个指令的集合 (v-bind绑定一个value属性,v-on:input给当前元素绑定一个input事件) <input type="text" name="" id="" v-model='message'> <input type="text" :value = "message" @input = "message = $event.target.value"> ...
v-model深入
qq_48113035的博客
01-12 1920
1.v-model的基本作用 v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。 <!-- 双向数据绑定 --> <input type="text" v-model="msg"> <span>{{msg}}</span> 2.VUE2中v-model的实现原理：单向数据绑定 + 原生DOM事件@input事件 @input事件是在表单数据发生变化的时候被触发，然后修改数据值即可实现双向数据绑定。 <!-- 不用v-
v-model参数变化（vue3.x）
weixin_46351593的博客
05-23 1883
文章目录v-model概述2.x 语法使用 `v-bind.sync`3.x 语法`v-model` 参数`v-model` 修饰符vue2.x父子组件传值案例vue3.x父子组件传值案例 v-model概述 在 Vue 2.0 发布后，开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问
vue中 v-model 和 :model 的区别
unlilalila的博客
11-09 1万+
今天在写demo的时候发现一件奇怪的事： 当我在给 input 元素使用 v-model 的缩写形式 :model 时，想要绑定的数据并没有渲染到浏览器中 然鹅，改为 v-model 之后就能成功渲染了 于是经过我一番研究发现 :model 其实相当于 v-bind:model 的缩写，对于我想要绑定的 input 的值应该使用v-bind:value ，所以如果在 input 元素上想要使用缩写形式应该是 :value ，经过我的试验发现这种缩写形式确实是可行的，数据可以成功渲染到浏览...
v-model底层原理
weixin_39226524的博客
11-16 294
v-model底层原理解析
v-model的使用
qq_53841687的博客
08-04 2562
原理：遍历数组的值，动态的监听绑定数组的值放置空数组里（v-model选定的值，每点一次会有一个value值，把value响应的值给v-model绑定的值—响应式原理可以解释）女。男。属性是互斥的，如果使用v-model，可以不使用。...
v-model相当于冒号吗
最新发布
09-15
是的，v-model相当于冒号。在Vue.js中，v-model是一个语法糖，可以简化组件和父组件之间的双向数据绑定。当我们使用v-model时，它会自动将组件的值绑定到一个名为value的prop上，并通过一个名为input的事件将更新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值