vue2学习笔记5 - 表单类元素的单向数据绑定和双向数据绑定

我是飞鸟呀

于 2024-07-15 18:00:00 发布

阅读量573

点赞数 10

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/140419823

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

前言

上一节我们学到，可以通过v-bind:指令，将标签体属性值通过js表达式绑定到vue实例中的某data上，读取该data数据，并通过vue模板中指定的页面元素，展示在页面上。

但是，我们在使用网页表单的时候，一定遇到过需要用户从页面上某输入框输入值，然后将其值保存到后台的操作。那么，v-bind可以实现从页面元素获取用户输入，然后更新vue实例data中的数据么？

答案是不能，v-bind只能实现从vue实例data读取数据展示到页面上的功能。这种反向需求，或者说双向传递数据的需求，我们需要用另一个指令：v-model，来实现双向绑定。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <!--引入vue.js，则全局就会多了一个vue的构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

了解本专栏