Vue学习之双向绑定

最新推荐文章于 2023-10-18 19:37:09 发布

永困子菌

最新推荐文章于 2023-10-18 19:37:09 发布

阅读量1k

点赞数

分类专栏： Vue学习文章标签： vue.js java

本文链接：https://blog.youkuaiyun.com/radmdzjtx/article/details/123653222

版权

Vue学习专栏收录该内容

6 篇文章

订阅专栏

本文探讨Vue.js的双向绑定特性，通过实例展示如何使用v-model实现数据与视图的同步更新。理解这一核心概念对于掌握Vue.js开发至关重要。

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

何为双向绑定。
我们简单的看一下例子，例子如下：

<!DOCTYPE html>
<html lang="en">    
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>输入的文本:<input type="text" v-model="message"> {{message}}</p>
    性别:
    <input type="radio" name="sex" value="男" v-model="lzy">男
    <input type="radio" name="sex" value="女" v-model="lzy">女
    <p>
        选中:
        {{lzy}}
    </p>
    下拉框：
    <select v-model="yzl">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{yzl}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm =new Vue({
        el:"#app",
        data: {
            message:"我在学习vue",
            lzy: '',
            yzl:''
        }
    });
</script>
</body>
</html>

如上，复制完上面代码，执行代码就会得到如下页面：
在这里插入图片描述
我们可以看见输入框，单选框，下拉框里的东西都会显示到旁边，并且随着内容的改变，旁边的显示也会随着旁边的内容而改变
此为双向绑定
我们可以看见，双向绑定设计到了一个新的知识点那就是v-model 这个就是双向绑定的关键，而绑定的内容就是data里的内容，且与方法名无关。