vue3前端青铜到黄金王者 - 第六个入门v-model双向数据绑定！_使用【v-model】绑定到一个响应式对象上;-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28008615/article/details/119549272

本文通过实例讲解Vue3中v-model的使用，展示了如何创建响应式对象并进行数据绑定。通过v-model实现输入框的双向数据绑定，当输入框值改变时，响应式对象同步更新，反之亦然。此外，还对比了ref和reactive的区别，ref用于基本数据类型，reactive用于对象。文章适合前端开发者学习日常知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习v-model 展示一下我们的奥运获奖项目。

它解决的问题

把一个响应式对象绑定展示到html标签，也就是数据绑定显示/更新。

比如我们有个状态更加用户数据重复更新。

显示v-model来显示内容

用法

v-model 绑定了一个响应式对象，并把结果展示出来。

<input v-model="account" type="text">

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue3青铜到黄金-丸子酱-vue-model</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
    <div id="wzApp">
<h3><a v-bind:href="url">点击访问->子酱@优快云博客</a></h3>
<pre>JS内存中的数据可以显示更新到html，html数据可以绑定更新到JS内存中
v-model双向绑定指令: 实质是v-bind和v-on
所以v-model不是双向数据绑定的核心, 核心是响应式对象
</pre>
<h3>{ { account  } }引用响应式数据<div>{{account}}</div></h3>
<h3>双向数据绑定</h3>
<input v-model="account" type="text">
<button @click="wzClick">提交</button>
    </div>
</body>
<script>
    const url = 'https://blog.youkuaiyun.com/qq_28008615'
    const { createApp, ref, reactive } = Vue

    const account = ref(10001000)// ref()把10001000包装为ref响应式对象,长的类似普通对象{ value:10001000 }
    console.log('wanzi: account:' , account);

    
    const app = {
        setup() {
            function wzClick() {
                alert(account.value)
            }
            return {
                account, wzClick, url
            }
        }
    }
    createApp(app).mount('#wzApp')
</script>
</html>

效果如下：

可以通过修改值，直接看到结果：
在这里插入图片描述

弹出窗口显示变量值：

在这里插入图片描述

解析

上面展示了v-model的几种用法。比如变量名为account。

{{account}} 双括弧引用响应式数据。
v-model 绑定数据account。

也可以使用这种方式

reactive()也可以把原来的数据类型变为响应式对象 
const wzSetting = reactive({
    account: 10002222
})

区别就是:

ref()传入的是js的基本数据类型;
reactive()中传入的是object普通对象。

今天学习这么多。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢