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解析树及树的遍历
Feb 03 Python
Python3 queue队列模块详细介绍
Jan 05 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
Jul 20 Python
从django的中间件直接返回请求的方法
May 30 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
Oct 21 Python
django创建简单的页面响应实例教程
Sep 06 Python
python学生信息管理系统实现代码
Dec 17 Python
python中for in的用法详解
Apr 17 Python
python爬虫中的url下载器用法详解
Nov 30 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
Jun 03 Python
Python if else条件语句形式详解
Mar 24 Python
使用Python开发贪吃蛇游戏 SnakeGame
Apr 30 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
Home Coffee Roasting
2021/03/03 咖啡文化
组合算法的PHP解答方法
2012/02/04 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
企业演讲稿范文
2013/12/28 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
矛盾论读书笔记
2015/06/29 职场文书
新郎新娘致辞
2015/07/31 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
教你怎么用Python生成九宫格照片
2021/05/20 Python