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文件及目录操作实例详解
Jun 04 Python
简单讲解Python中的闭包
Aug 11 Python
PyQt 线程类 QThread使用详解
Jul 16 Python
python构建深度神经网络(续)
Mar 10 Python
Python Numpy 实现交换两行和两列的方法
Jun 26 Python
Python流程控制 if else实现解析
Sep 02 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
Oct 25 Python
python3 字符串知识点学习笔记
Feb 08 Python
IDLE下Python文件编辑和运行操作
Apr 25 Python
如何使用python自带IDLE的几种方法
Oct 10 Python
python 日志模块logging的使用场景及示例
Jan 04 Python
解析python中的jsonpath 提取器
Jan 18 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
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python实现图片拼接的代码
2018/07/02 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
本科生个人求职自荐信
2013/09/26 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年维修工作总结
2015/04/25 职场文书
七一慰问简报
2015/07/20 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
关于Vue中的options选项
2022/03/22 Vue.js