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通过装饰器检查函数参数数据类型的方法
Mar 13 Python
Python随机生成信用卡卡号的实现方法
May 14 Python
Python脚本实现自动发带图的微博
Apr 27 Python
Python采用Django制作简易的知乎日报API
Aug 03 Python
python如何通过twisted实现数据库异步插入
Mar 20 Python
python读取几个G的csv文件方法
Jan 07 Python
python基于gevent实现并发下载器代码实例
Nov 01 Python
tensorflow 实现数据类型转换
Feb 17 Python
Python生成随机验证码代码实例解析
Jun 09 Python
浅谈django框架集成swagger以及自定义参数问题
Jul 07 Python
python常量折叠基础知识点讲解
Feb 28 Python
pytorch model.cuda()花费时间很长的解决
Jun 01 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中文乱码问题解决方法
2009/02/27 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
详解cordova打包成webapp的方法
2017/10/18 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
jQuery分组选择器简单用法示例
2019/04/04 jQuery
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python全局变量操作详解
2015/04/14 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
医院实习介绍信
2014/01/12 职场文书
保护黄河倡议书
2014/05/16 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
复试通知单模板
2015/04/24 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js