Vue - 05 数据单向和双向绑定

大力pig

已于 2023-03-30 20:51:22 修改

阅读量104

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2023-03-30 20:51:09 首次发布

本文链接：https://blog.csdn.net/m0_53753920/article/details/129866082

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

单向绑定

V-Bind

在前一个章节我们学习了v-bind指令绑定，当我们有一个输入框的时候，我们来看一下指令绑定能否实现双向绑定。

代码演示

<div id="root">单向数据绑定：<input type="text" v-bind:value="name">

页面调试

当我们尝试在浏览器中改变name的值的时候，root实例里不会改变name的值。这是因为我们的v-bind实现的是单向绑定。

双向绑定

v-model可以实现双向绑定，在页面输入数据之后可以存储到data里

    <input type="text" v-model:value="name2">

页面演示

页面如果把输入框的数据改变成为其他值时候，data里name2的值也可以随之改变。

总结： Vue里有两种数据绑定的方式。

1. 单向绑定， v-bind, 数据只能从Vue实例的data里流向页面。

2. 双向绑定， v-model，数据不仅能从data流向页面，，也能从页面流向data。

3. 双向绑定一般用于表单元素，如input, select。

4. v-model:value可以简写为v-model, 因为默认值就是value.

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    单向数据绑定：<input type="text" v-bind:value="name">
    <br/>
    双向数据绑定：<input type="text" v-model:value="name2">

</div>

</body>

<script>
    Vue.config.productionTip=false //阻止vue启动时发生生产提示
    new Vue({
        el:"#root",
        data:{
            name: '大力pig',
            name2: '大力pig',
        }
    })
</script>
</html>

大力pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 05 数据单向和双向绑定

当我们尝试在浏览器中改变name的值的时候，root实例里不会改变name的值。在前一个章节我们学习了v-bind指令绑定，当我们有一个输入框的时候，我们来看一下指令绑定能否实现双向绑定。2. 双向绑定， v-model，数据不仅能从data流向页面，，也能从页面流向data。页面如果把输入框的数据改变成为其他值时候，data里name2的值也可以随之改变。1. 单向绑定， v-bind, 数据只能从Vue实例的data里流向页面。v-model可以实现双向绑定，在页面输入数据之后可以存储到data里。
复制链接

扫一扫