vue学习笔记（3）——数据绑定

weixin_54763080

已于 2023-01-28 14:17:30 修改

阅读量145

点赞数

分类专栏： vue学习笔记文章标签： vue.js Powered by 金山文档

于 2023-01-25 17:33:38 首次发布

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128761630

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

Vue中有2种数据绑定方式：

单向绑定（v-bind）：数据只能从data流向页面

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）

v-model：value可以简写为v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
       
       单向数据绑定:<input type="text" :value="name"> 
       双向数据绑定:<input type="text" v-model="name"> 
       <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）中 -->
       <!-- <h2 v-model:x="name">你好</h2> -->
    </div>


<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:'#root',
        data:{
            name:'12345'
        }

    })
   
</script>
</body>
</html>

weixin_54763080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记（3）——数据绑定

v-model：value可以简写为v-model，因为v-model默认收集的就是value值。双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。双向绑定一般都应用在表单类元素上（如：input、select等）单向绑定（v-bind）：数据只能从打他流向页面。
复制链接

扫一扫