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动态创建div
Sep 25 Javascript
jQuery 解析xml文件
Aug 09 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
javascript类型转换使用方法
Feb 08 Javascript
javascript实用方法总结
Feb 06 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
浅析java线程中断的办法
Jul 29 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
vue父子模板传值问题解决方法案例分析
Feb 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
smarty section简介与用法分析
2008/10/03 PHP
php自动加载机制的深入分析
2013/06/08 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python解析json文件相关知识学习
2016/03/01 Python
python ddt实现数据驱动
2018/03/14 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
行政部主管岗位职责
2013/12/28 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
真诚的求职信
2014/07/04 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Django路由层如何获取正确的url
2021/07/15 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Python实现文字pdf转换图片pdf效果
2022/04/03 Python