vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

更新时间：2019年03月08日 12:06:49 作者：白杨-M

这篇文章主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能。分享给大家供大家参考，具体如下：

v-model 一般表单元素(input) 双向数据绑定

el:'#box',//这里放的是选择器。

不然会不生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net vue.js数据双向绑定</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',//这里放的是选择器
        data:{
          msg:'welcome vue'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
  </div>
</body>
</html>

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

vue实现前端列表拖拽功能
这篇文章主要为大家详细介绍了如何利用vue实现前端列表拖拽功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
2023-12-12
Vue+Element-U实现分页显示效果
这篇文章主要为大家详细介绍了Vue+Element-U实现分页显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
vue+element开发使用el-select不能回显的处理方案
这篇文章主要介绍了vue+element开发使用el-select不能回显的处理方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vant时间控件使用方法详解
这篇文章主要为大家详细介绍了vant时间控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
vue cli4下环境变量和模式示例详解
这篇文章主要介绍了vue cli4环境变量和模式示例详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤
这篇文章主要介绍了vue3+vite+ts通过svg-sprite-loader插件使用自定义图标,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue学习记录之动态组件浅析
动态组件指的是动态切换组件的显示与隐藏,这篇文章主要给大家介绍了关于vue学习记录之动态组件的相关资料,本文通过示例代码介绍介绍的非常详细,需要的朋友可以参考下
2022-10-10
Vuex实现数据共享的方法
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了Vuex实现数据共享的方法,需要的朋友可以参考下
2019-12-12
Vue路由传参页面刷新后参数丢失原因和解决办法
这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题,下面这篇文章主要给大家介绍了关于Vue路由传参页面刷新后参数丢失原因和解决办法,需要的朋友可以参考下
2022-12-12
Vue页面骨架屏注入方法
这篇文章主要介绍了Vue页面骨架屏注入的操作，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-05-05