Vue双向数据绑定 ~ 非常详细哦

最新推荐文章于 2024-03-10 07:44:19 发布

weixin_46370867

最新推荐文章于 2024-03-10 07:44:19 发布

阅读量89

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/112757474

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

Vue的双向数据绑定可以帮助我们更好的实现底层数据与页面数据的交互。
下面是对Vue的双向数据绑定的具体整理，希望可以帮助到有需要的小伙伴~

双向数据绑定

什么是双向数据绑定

实现交互

用户在页面中改变后内容，代码中的数据会发生变化

代码中的数据被改变后，页面中的内容会跟着发生变化

在这里插入图片描述

双向数据绑定分析
- v-model指令用法
```
<input type="text" v-model="uname" />
```

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <!-- 1. 提供标签用于存放数据 -->
    <div id="app">
        <!-- 4. 把vue提供的数据填充到标签里面 -->
        <!-- 把msg数据存放到id为app的div中 -->
        <!-- {{}} : 插值表达式
                * 把数据填充到HTML标签里
                * 支持基本的计算操作
        -->
        <div>{{msg}}</div> 
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <!-- 2. 引入vue.js库文件 -->
    <script src="js/vue.js"></script>
    <script>
    //   3. 使用vue语法实现功能
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>
</body>
</html>