Vue入门 - 3 数据绑定

最新推荐文章于 2026-03-30 18:04:27 发布

原创最新推荐文章于 2026-03-30 18:04:27 发布 · 412 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js中的两种数据绑定方式：单项绑定（v-bind）和双向绑定（v-model）。v-bind用于从data向页面传递数据，而v-model则允许数据在data和页面之间双向流动，常用于表单元素。示例代码展示了这两种绑定的使用方法，包括简写形式，并强调v-model只能用在表单元素上。

文章目录

一、1.Vue的两种绑定方式
二、代码

一、1.Vue的两种绑定方式

 1 单项绑定（v-bind）: 数据只能从data流向页面
 2 双向绑定（v-model）:数据不仅能从data流向页面 还能从页面流向data

注： v-model只能用在表单类元素（输入元素）上

二、代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js//vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
        Vue中有两种绑定方式：
            1 单项绑定（v-bind）: 数据只能从data流向页面
            2 双向绑定（v-model）:数据不仅能从data流向页面 还能从页面流向data
     -->
    <div id="root">
        <!-- 单项数据绑定<input type="text" v-bind:value="name"><br>
        单项数据绑定<input type="text" v-model:value="name"> -->

        <!-- 简写 -->
        单项数据绑定<input type="text" :value="name"><br>
        双项数据绑定<input type="text" v-model="name">

        <!-- 下面代码报错 v-model只能用在表单类元素（输入元素） 上  -->
        <!-- <h2 v-model:x="name"></h2> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{ 
          name:'张三'
        }
    })
</script>
</html>