Vue常用指令V-model用法


Posted in Javascript onMarch 08, 2017

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="../js/Vue.js" charset="utf-8"></script>
 <script type="text/javascript">
  window.onload = function(){
  var vm = 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>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="../js/Vue.js" charset="utf-8"></script>
 <script type="text/javascript">
  window.onload = function(){
  var vm = 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>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="../js/Vue.js" charset="utf-8"></script>
 <script type="text/javascript">
  window.onload = function(){
  var vm = new Vue({
    el:'.box',
    data:{
     msg:'welcome vue'
    }
  });
  }
 </script>
 </head>
 <body>
 <div class="box">
  <input type="text" v-model='msg'/>
  <br />
  <input type="text" v-model='msg'/>
  <br />
  {{msg}}
 </div>
 </body>
</html>
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="../js/Vue.js" charset="utf-8"></script>
 <script type="text/javascript">
  window.onload = function(){
  var vm = new Vue({
    el:'.box',
    data:{
     msg:'welcome vue',
     msg2:12,
     msg3:true,
     arr:['app','orange','pare']
    }
  });
  }
 </script>
 </head>
 <body>
 <div class="box">
  <input type="text" v-model='msg'/>
  <br />
  <input type="text" v-model='msg'/>
  <br />
  {{msg}}
  <br />
  {{msg2}}
  <br />
  {{msg3}}
  <br />
  {{arr}}
 </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jquery validate表单验证插件
Sep 06 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
详解Vue监听数据变化原理
Mar 08 #Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
You might like
PHP 文件上传功能实现代码
2009/06/24 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python读取Android permission文件
2013/11/01 Python
python根据经纬度计算距离示例
2014/02/16 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python实现复制大量文件功能
2019/08/31 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
员工自我鉴定
2013/10/09 职场文书
行政主管岗位职责
2013/11/18 职场文书
军训自我鉴定
2014/01/22 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
六个一活动实施方案
2014/03/21 职场文书
销售队伍口号
2014/06/11 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
个人承诺书格式范文
2015/04/29 职场文书
信访维稳承诺书
2015/05/04 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书