详解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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详谈js的变量提升以及使用方法
Oct 06 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
javascript实现前端分页效果
Jun 24 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
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
极简的Python入门指引
2015/04/01 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python中包的用法及安装
2020/02/11 Python
深入浅析python的第三方库pandas
2020/02/13 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python实现与redis交互操作详解
2020/04/21 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python实现图片转字符画的完整代码
2021/02/21 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技