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中吸引人的一些特性
Apr 09 Python
Python版微信红包分配算法
May 04 Python
深入解析Python中的list列表及其切片和迭代操作
Mar 13 Python
Python3实现并发检验代理池地址的方法
Sep 18 Python
tensorflow获取变量维度信息
Mar 10 Python
python paramiko利用sftp上传目录到远程的实例
Jan 03 Python
python内存动态分配过程详解
Jul 15 Python
python实现tail实时查看服务器日志示例
Dec 24 Python
Python3 A*寻路算法实现方式
Dec 24 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
Mar 16 Python
Python + selenium + crontab实现每日定时自动打卡功能
Mar 31 Python
Python re.sub 反向引用的实现
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
追求程序速度,而不是编程的速度
2008/04/23 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
详解在Python中处理异常的教程
2015/05/24 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
中秋手机店促销方案
2014/06/16 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015年药房工作总结
2015/04/25 职场文书
工伤调解协议书
2016/03/21 职场文书