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>

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

您可能感兴趣的文章:

使用vuedraggable实现从左向右拖拽功能
这篇文章主要为大家详细介绍了使用vuedraggable实现从左向右拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue Echarts实现图表的动态适配以及如何优化
这篇文章主要介绍了Vue Echarts实现图表的动态适配以及如何优化，在实际的前端开发过程中，动态适配是一个非常重要的问题，在数据可视化的场景下，图表的动态适配尤为重要，需要的朋友可以参考下
2023-05-05
vue中选中多个选项并且改变选中的样式的实例代码
这篇文章主要介绍了vue中选中多个选项并且改变选中的样式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
vue使用CSS插件scss时代码报红问题
这篇文章主要介绍了vue使用CSS插件scss时代码报红问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue3的组件通信&v-model使用实例详解
props 主要用于父组件向子组件通信,再父组件中通过使用:msg='msg'绑定需要传给子组件的属性值,然后再在子组件中用props接收该属性值,这篇文章主要介绍了vue3的组件通信&v-model使用,需要的朋友可以参考下
2024-05-05
VUE 实现滚动监听导航栏置顶的方法
今天小编就为大家分享一篇VUE 实现滚动监听导航栏置顶的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解Vue.use自定义自己的全局组件
本篇文章主要介绍了Vue.use自定义自己的全局组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue+uniapp实现生成二维码
这篇文章主要为大家详细介绍了vue结合uniapp实现生成二维码的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下
2023-12-12
vue3+ts重复参数提取成方法多处调用以及字段无值时不传字段给后端问题
在进行API开发时,优化参数传递是一个重要的考量,传统方法中,即使参数值为空,也会被包含在请求中发送给后端,这可能会导致不必要的数据处理,而优化后的方法则只会传递那些实际有值的字段,从而提高数据传输的有效性和后端处理的效率
2024-10-10
解决vue-cli webpack打包后加载资源的路径问题
今天小编就为大家分享一篇解决vue-cli webpack打包后加载资源的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09