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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
jqgrid 简单学习笔记
May 03 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
JS实现购物车特效
2017/02/02 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python 生成图形验证码的方法示例
2018/11/11 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
班主任个人工作反思
2014/04/28 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2015年试用期工作总结
2014/12/12 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python