Vue2基础篇-04-数据绑定

Alan0517

已于 2023-05-31 13:00:53 修改

阅读量265

点赞数

文章标签： vue.js javascript 前端

于 2022-12-07 13:05:57 首次发布

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218465

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

文章目录

1. demo
2. 小总结

1. demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 数据绑定</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- 单向绑定:data中的数据影响页面的数据 -->
        单向数据绑定：<input type="text" v-bind:value="name"> <br>
        <!-- 双向绑定：data和页面互相影响 -->
        双向数据绑定：<input type="text" v-model:value="name"><br>
    </div>

    <!-- 插值语法 {{}}  -->

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: "123"
            }
        })
    </script>
</body>

</html>

2. 小总结

<!--  小总结:
    
    1. v-bind: 单向绑定,只能 data-> 页面;
    2. v-model: 双向绑定，data和页面互相影响;
    3. v-model只能应用在 表单内元素上(比如输入元素：input 单选框，select 多选框，下拉列表等)
    4. v-model:value  可以简写成 v-model,因为v-model 默认收集的就是value的值
 -->

Alan0517

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2基础篇-04-数据绑定

- 小总结:1. v-bind: 单向绑定,只能 data-> 页面;2. v-model: 双向绑定，data和页面互相影响;3. v-model只能应用在表单内元素上(比如输入元素：input 单选框，select 多选框，下拉列表等)4. v-model:value 可以简写成 v-model,因为v-model 默认收集的就是value的值-->
复制链接

扫一扫