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 相关文章推荐
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
JS触摸与手势事件详解
May 09 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
详解Typescript里的This的使用方法
Jan 08 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脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
ExpressJS入门实例
2015/01/14 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
详解Python中import机制
2020/09/11 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
企业员工培训感言
2014/02/26 职场文书
青涩记忆观后感
2015/06/18 职场文书
python pygame入门教程
2021/06/01 Python
Go语言编译原理之变量捕获
2022/08/05 Golang