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


Posted in Javascript onMarch 08, 2019

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

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

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

不然会不生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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>

运行效果:

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

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

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

Javascript 相关文章推荐
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 #Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 #Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 #Javascript
Javascript之高级数组API的使用实例
Mar 08 #Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 #Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
详解JavaScript 的变量
Mar 08 #Javascript
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
vue实现分页栏效果
2019/06/28 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
应届毕业生应聘自荐信范文
2014/02/26 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014年妇联工作总结
2014/11/21 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
社区党建工作总结2015
2015/05/13 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
python超详细实现完整学生成绩管理系统
2022/03/17 Python