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中列表、字典、元组、集合数据结构整理
Nov 20 Python
python统计文本文件内单词数量的方法
May 30 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
Mar 02 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
Apr 15 Python
python 读入多行数据的实例
Apr 19 Python
python+ffmpeg批量去视频开头的方法
Jan 09 Python
对Python实现累加函数的方法详解
Jan 23 Python
PYQT5实现控制台显示功能的方法
Jun 25 Python
python绘图模块matplotlib示例详解
Jul 26 Python
pyenv与virtualenv安装实现python多版本多项目管理
Aug 17 Python
Python Pandas对缺失值的处理方法
Sep 27 Python
Python进行区间取值案例讲解
Aug 02 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 ajax 分页类代码
2008/11/13 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
第四章 php数学运算
2011/12/30 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
js css自定义分页效果
2017/02/24 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
js编写简易的计算器
2020/07/29 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
关于旷工的检讨书
2014/02/02 职场文书
学生个人自我鉴定
2014/03/26 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
工地安全生产标语
2014/06/06 职场文书
优秀员工推荐材料
2014/12/20 职场文书
大学生求职信怎么写
2015/03/19 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python