详解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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
angularJS提交表单(form)
Feb 09 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
js中作用域的实例解析
Mar 16 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
微信小程序组件 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
PHP操作MySQL事务实例
2014/11/05 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
解决laravel session失效的问题
2019/10/14 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python实现二分查找算法实例
2015/05/26 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
2014年公务员工作总结
2014/11/18 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB