脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue双向绑定

Vue双向绑定详解

 更新时间：2021年11月15日 15:40:38   作者：咸鱼_翻身  
这篇文章主要介绍了Vue 实现双向绑定的四种方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能够给你带来帮助

1、双向绑定

双向绑定就是 你们前端数据改变 你们data中的数据也会改变，同样的，你们data中的数据改变了 前端页面中的数据也同样会发生改变，而且，这个过程是不需要刷新的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 输入什么就会显示什么，其实就是前端数据改变，message就会跟着改变-->
    输入文本：<input type="text" v-model="message">{{message}}
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

运行结果：

data中的数据改变了 前端页面中的数据也同样会发生改变，如下所示：

在这里插入图片描述

前端数据改变 你们data中的数据也会改变

如下所示：

在这里插入图片描述

2、那么其它标签选中会不会也有这个结果，答案当然是有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="message"> 男
    <input type="radio" name="sex" value="女" v-model="message"> 女
    <p>你的性别是：{{message}}</p>
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

运行结果：

在这里插入图片描述

3、我们再来看一个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <select v-model="select">
        <option value="" disabled>--请选择--</option>
        <option>男</option>
        <option>女</option>
    </select>
    <span>你的选择：{{select}}</span>
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            select: ""
        }
    });
</script>
 </body>
</html>

运行结果：

在这里插入图片描述

在这里插入图片描述

4、注意

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过JavaScript 在组件的data选项中声明初始值！！！

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • vue实现气泡运动撞击效果

    vue实现气泡运动撞击效果

    这篇文章主要为大家详细介绍了vue实现气泡运动撞击效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Vue2.0 $set()的正确使用详解

    Vue2.0 $set()的正确使用详解

    这篇文章主要介绍了Vue2.0 $set()的正确使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue 中mixin 的用法详解

    Vue 中mixin 的用法详解

    e中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04
  • vue 处理跨域问题及解决方法小结

    vue 处理跨域问题及解决方法小结

    跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧
    2021-09-09
  • 详解vue.js数据传递以及数据分发slot

    详解vue.js数据传递以及数据分发slot

    本篇文章给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识，有这方面兴趣的朋友参考下吧。
    2018-01-01
  • Vue.js教程之计算属性

    Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。这篇文章给大家介绍了Vue.js教程之计算属性，非常不错，感兴趣的的朋友一起看看吧
    2016-11-11
  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    本文主要介绍了M1 pro芯片启动Vue项目的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 解决vue router使用 history 模式刷新后404问题

    解决vue router使用 history 模式刷新后404问题

    这篇文章主要介绍了解决vue router使用 history 模式刷新后404问题,需要的朋友可以参考下
    2017-07-07
  • Vue实现购物车实例代码两则

    Vue实现购物车实例代码两则

    这篇文章主要介绍了Vue实现购物车实例代码,需要的朋友可以参考下
    2020-05-05
  • vue使用技巧及vue项目中遇到的问题

    vue使用技巧及vue项目中遇到的问题

    这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-06-06

最新评论