vue.js实现输入框输入值内容实时响应变化示例


Posted in Python onJuly 07, 2018

本文实例讲述了vue.js实现输入框输入值内容实时响应变化的方法。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3water.com 输入内容实时显示</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
 <div id="app">
   <input type="text" v-model="name" placeholder="你的名字">
  <h1>你好,{{ name }}</h1>
 </div>
</body>
</html>
<script>
  var myData = {
    name:''
  };
  var app = new Vue({
    el:'#app',
    data:myData,
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js实现输入框输入值内容实时响应变化示例

希望本文所述对大家vue.js程序设计有所帮助。

Python 相关文章推荐
python目录操作之python遍历文件夹后将结果存储为xml
Jan 27 Python
详解Python的迭代器、生成器以及相关的itertools包
Apr 02 Python
Pthon批量处理将pdb文件生成dssp文件
Jun 21 Python
详解Python设计模式编程中观察者模式与策略模式的运用
Mar 02 Python
Python学习小技巧之列表项的推导式与过滤操作
May 20 Python
详解Python 模拟实现生产者消费者模式的实例
Aug 10 Python
python中的闭包函数
Feb 09 Python
python opencv之SURF算法示例
Feb 24 Python
Python unittest模块用法实例分析
May 25 Python
python scp 批量同步文件的实现方法
Jan 03 Python
python将logging模块封装成单独模块并实现动态切换Level方式
May 12 Python
Python 数据科学 Matplotlib图库详解
Jul 07 Python
详解Python最长公共子串和最长公共子序列的实现
Jul 07 #Python
python求最大连续子数组的和
Jul 07 #Python
python 平衡二叉树实现代码示例
Jul 07 #Python
详解python异步编程之asyncio(百万并发)
Jul 07 #Python
基于Python开发chrome插件的方法分析
Jul 07 #Python
Python实现基于C/S架构的聊天室功能详解
Jul 07 #Python
Python实现的txt文件去重功能示例
Jul 07 #Python
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python实现二维插值的三维显示
2018/12/17 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
珠宝店促销方案
2014/03/21 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
感谢师恩主题班会
2015/08/17 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python