[Vue基础]数据绑定v-bind和v-model

最新推荐文章于 2023-12-26 21:28:30 发布

一颗小梨子吖

最新推荐文章于 2023-12-26 21:28:30 发布

阅读量267

点赞数

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

本文链接：https://blog.csdn.net/weixin_45662637/article/details/120967401

版权

Vue基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue中的数据绑定分为单向和双向两种形式。

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

双向数据绑定（v-model）：数据既能从data流向页面，也可以从页面流向data。

代码示例：

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <!--准备容器-->
    <div id="root">
        <h2>欢迎光临,{{name}},{{address}}</h2>
        <a v-bind:href="url">茶颜悦色</a><p>{{Date.now()}} </p>
        <hr>

        <!--单向绑定用v-bind， 双向绑定用v-model，v-model一般运用在表单元素上-->  
        饮品1：<input type="text" v-bind:value="drink.name1"><input type="text" v-bind:value="drink.ice1"></br><br>
        饮品2：<input type="text" v-model:value="drink.name2"><input type="text" v-model:value="drink.ice2">
    </div>

    <script type="text/javascript">
    Vue.config.productionTip = false //阻止vue生成生产提示。
    
   //创建实例
    new Vue({
       el:'#root',
       data:{
           drink:{
               name1:'人间烟火',
               name2:'声声乌龙',
               ice1:'正常冰',
               ice2:'少冰'
        },
           name:'茶颜悦色',
           address:'桃子湖店',
           url:'https://baike.baidu.com/item/%E8%8C%B6%E9%A2%9C%E6%82%A6%E8%89%B2/14306340?fr=aladdin'
       }
   })
    </script>
    
</body>
</html>

可简写为：

运行结果：

使用v-bind，当data值被修改时，输入框会随之变化；当输入框里的值被修改时，data不会随之变化。
使用v-model，当data值被修改时，输入框会随之变化；当输入框里的值被修改时，data也会随之变化。

一颗小梨子吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[Vue基础]数据绑定v-bind和v-model

Vue中的数据绑定分为单向和双向两种形式。单项数据绑定（v-bind)：数据只能从data流向页面。双向数据绑定（v-model）：数据既能从data流向页面，也可以从页面流向data。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫