详解Vue.js之视图和数据的双向绑定(v-model)


Posted in Javascript onJune 23, 2017

1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框,完成视图和数据的双向绑定。

2、JavaScript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
 
    <script type="text/javascript"> 
      window.onload = function() { 
         vm = new Vue({ 
          el: '#app', 
          data: { 
            message: 'Hello World', 
          } 
 
        }); 
      } 
    </script>

3、Html的页面代码

<div id="app" class="container"> 
      <input type="text" v-model='message'/> <input type="text" v-model='message'/> 
      <br /> 
      {{message}} 
    </div>

4、完整的代码

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> 
    <style type="text/css"> 
      .container{ 
        margin-top: 20px; 
      } 
    </style> 
    <script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
    <script type="text/javascript" src="../js/jquery.min.js"></script> 
    <script type="text/javascript"> 
      $().ready(function() { 
        var vm = new Vue({ 
          el: '#app', 
          data: { 
            message: "Hello World ! " 
          } 
        }); 
      }); 
    </script> 
  </head> 
 
  <body> 
 
    <div id="app" class="container"> 
      <input type="text" v-model='message'/> <input type="text" v-model='message'/> 
      <br /> 
      {{message}} 
    </div> 
 
  </body> 
 
</html>

5、效果演示           

 详解Vue.js之视图和数据的双向绑定(v-model)

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

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
微信小程序组件 marquee实例详解
Jun 23 #Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 #Javascript
vue数据双向绑定的注意点
Jun 23 #Javascript
Vue.js常用指令的使用小结
Jun 23 #Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 #Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 #Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP rsa加密解密使用方法
2015/04/27 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jQuery实用技巧必备(上)
2015/11/02 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python语音识别实践之百度语音API
2018/08/30 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
电大自我鉴定范文
2013/10/01 职场文书
生物制药专业求职信
2014/03/11 职场文书
2014春晚主持词
2014/03/25 职场文书
个人综合鉴定材料
2014/05/23 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript