Vue 的数据绑定

最新推荐文章于 2023-05-31 00:28:54 发布

YonChao

最新推荐文章于 2023-05-31 00:28:54 发布

阅读量395

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121339371

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

03 数据绑定

1.单向的数据绑定

使用v-bind:

data中的数据改变了，能够影响容器的值

但是容器中输入框的值并不能反过来去影响data中的数据的值

2. 双向的数据绑定

使用v-model:

data中的数据改变了，能够影响容器的值

但是容器中输入框的值也能反过来去影响data中的数据的值

局限：v-model:只能用在表单类元素(输入类元素)中,因为只有能捕获用户输入的元素才能去改变data中的数据值。

简写：

双向数据绑定:<input type="text" v-model:value="name">
双向数据绑定:<input type="text" v-model="name">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        单向数据绑定:<input type="text" :value="name"><br />
        双向数据绑定:<input type="text" v-model:value="name"><br />
        双向数据绑定:<input type="text" v-model="name">
    </div>
    <script type="text/javascript">
        /* 开发环境提示关闭 */
        Vue.config.productionTip = false
        /* new一个Vue */
        new Vue({
            //容器
            /* el用于指定当前实例为那个容器服务，值通常为css选择器字符串 */
            el: '#root',
            //数据,提供给el对应的容器去使用
            data: {
                name: '王永超'
            }
        })
    </script>
</body>
</html>

YonChao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 的数据绑定

03 数据绑定1.单向的数据绑定使用v-bind:data中的数据改变了，能够影响容器的值但是容器中输入框的值并不能反过来去影响data中的数据的值2. 双向的数据绑定使用v-model:data中的数据改变了，能够影响容器的值但是容器中输入框的值也能反过来去影响data中的数据的值局限：v-model:只能用在表单类元素(输入类元素)中,因为只有能捕获用户输入的元素才能去改变data中的数据值。简写：双向数据绑定:<input type="text" v-model:value
复制链接

扫一扫