vue单向以及双向数据绑定方式(v-bind和v-model的使用)

更新时间：2023年04月23日 09:37:44 作者：小花皮猪

这篇文章主要介绍了vue单向以及双向数据绑定方式(v-bind和v-model的使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

准备工作

首先还是创建一个新的页面写入基本代码

v-bind单向绑定

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
      
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
      
    </script>
</body>

</html>

简单写一个输入框绑定

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        单项数据绑定：<input type="text" :value="name">
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

页面长这样

此时我们打开vue开发工具，动态修改name的值,发现页面的值变了

但是如果我们修改输入框的值，开发工具里面的name不会随着输入框改变

因为v-bind是单向绑定的，想要实现这个功能，我们需要使用双向绑定 v-model

v-model双向绑定

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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="name">
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

通过页面我们可以发现，我们输入框会带着下面的开发工具的值一起改变

既然双向绑定这么厉害,那么我们是不是可以放弃单向绑定，一直使用双向绑定呢？

当然是不可以的，我们再看一个例子

首先是单向绑定，没有任何问题

然后是双向绑定，发现x已经丢了，并且控制台报错了

模板编译失败，v-model不支持这种类型

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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="name">
        <!-- 如下代码是错误的，因为v-model只能应用在表单(输入类)元素上 必须要有value值 -->
        <h2 v-model:x="name">你好啊！</h2>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

总结

Vue中有两种绑定方式

1 单项绑定(v-bind):数据只能从data流向页面,可以简写为:

2 双项绑定(v-model):数据不能能从data流向页面，还可以从页面流向data

备注：

1双向绑定一般都应用在表单类元素上(比如input,select,radio等)

2 v-model:value可以简写v-model,因为v-model默认收集的就是value值

单向双向绑定简写如下

<!-- 简写 -->
单项数据绑定：<input type="text" :value="name"><br>
双项数据绑定：<input type="text" v-model="name">

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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="name"> -->

        <!-- 简写 -->
        单项数据绑定：<input type="text" :value="name"><br>
        双项数据绑定：<input type="text" v-model="name">
        <!-- 如下代码是错误的，因为v-model只能应用在表单(输入类)元素上 必须要有value值 -->
        <!-- <h2 v-model:x="name">你好啊！</h2> -->
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡
2020-02-02
Element中el-tabs左右滑动动画的实现
本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2024-03-03
基于Vue中this.$options.data()的this指向问题
这篇文章主要介绍了基于Vue中this.$options.data()的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue3.0实现复选框组件的封装
这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
如何在Vue中实现Svelte的Defer Transition
这篇文章主要介绍了如何在Vue中实现Svelte的Defer Transition，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
2021-04-04
微信小程序实战基于vue2实现瀑布流的代码实例
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，这篇文章主要介绍了微信小程序实战，基于vue2实现瀑布流,需要的朋友可以参考下
2022-12-12
vue.js绑定class和style样式（6）
这篇文章我们将一起学习vue.js实现绑定class和style样式，感兴趣的小伙伴们可以参考一下
2016-12-12
vuex 如何动态引入 store modules
这篇文章主要介绍了vuex 如何动态引入 store modules，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue ElementUI之Form表单验证遇到的问题
这篇文章主要介绍了Vue ElementUI之Form表单验证遇到的问题,需要的朋友可以参考下
2017-08-08
在vs code 中如何创建一个自己的 Vue 模板代码
这篇文章主要介绍了在vs code 中如何创建一个自己的 Vue 模板代码,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11