3.v-model双向绑定

最新推荐文章于 2024-05-08 11:05:31 发布

iqzn.

最新推荐文章于 2024-05-08 11:05:31 发布

阅读量326

点赞数

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

本文链接：https://blog.csdn.net/weixin_49398894/article/details/123547446

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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="name"><br/>
    </div> 

    <script type="text/javascript">
        Vue.config.productionTip=false
        //创建vue实例
        new Vue({
            el:'#root',
            data:{
                name:'学习Vue',
            }
        })
    </script>  
</body>
</html>

在这里插入图片描述
总结：
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
注意：
1.双向绑定一般都应用在表单类元素上（如:input、select等)
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值.

iqzn.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.v-model双向绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&
复制链接

扫一扫

专栏目录