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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
angular4实现带搜索的下拉框
Mar 25 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调用VC编写的COM组件实例
2014/03/29 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js tab效果的实现代码
2009/12/26 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python 列表(List)操作方法详解
2014/03/11 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python生成任意频率正弦波方式
2020/02/25 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
应届大学生的推荐信
2013/11/20 职场文书
地理教师岗位职责
2014/03/16 职场文书
家长写给孩子的评语
2014/04/18 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
销售口号霸气押韵
2015/12/24 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
oracle数据库去除重复数据
2022/05/20 Oracle
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript