Vue-双向数据绑定（1）

最新推荐文章于 2024-09-04 18:40:00 发布

cc&

最新推荐文章于 2024-09-04 18:40:00 发布

阅读量530

点赞数

本文链接：https://blog.csdn.net/grow_/article/details/121318809

版权

关键词由CSDN通过智能技术生成

1、什么是双向数据绑定

输入框的内容改变，框上的文本也进行相应的改变

2、双向数据绑定分析

v-model指令用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue基本使用</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <!-- 引入vue.js -->
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <div v-text>{{msg}}</div>
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <script>
        var vue = new Vue({
            // 元素的挂载位置（值可以是Css选择器或DOM元素）
            el: '#app',
            // 模型数据（值是一个对象）
            data: {
                msg: 'hello vue',
            }
        });
    </script>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cc&

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-双向数据绑定（1）

1、什么是双向数据绑定输入框的内容改变，框上的文本也进行相应的改变2、双向数据绑定分析 v-model指令用法 <input type="text" v-model="msg"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue基本使用</title&g...
复制链接

扫一扫