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获取当前页面内所有链接的四种方法对比分析
Aug 19 Python
python3如何将docx转换成pdf文件
Mar 23 Python
简单实现python聊天程序
Apr 01 Python
Python工厂函数用法实例分析
May 14 Python
完美解决python中ndarray 默认用科学计数法显示的问题
Jul 14 Python
opencv python 图像去噪的实现方法
Aug 31 Python
对python文件读写的缓冲行为详解
Feb 13 Python
python使用Plotly绘图工具绘制气泡图
Apr 01 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
Jul 18 Python
Ubuntu+python将nii图像保存成png格式
Jul 18 Python
python 深度学习中的4种激活函数
Sep 18 Python
基于Python模拟浏览器发送http请求
Nov 06 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伪静态的实现详细介绍
2013/04/28 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
Javascript 对象的解释
2008/11/24 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python用模块pytz来转换时区
2016/08/19 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
相亲活动方案
2014/08/26 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python