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 21 Python
Python实现微信公众平台自定义菜单实例
Mar 20 Python
Python面向对象编程中关于类和方法的学习笔记
Jun 30 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
Oct 21 Python
解决Python下imread,imwrite不支持中文的问题
Dec 05 Python
python实现的MySQL增删改查操作实例小结
Dec 19 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
Jan 14 Python
浅析Python 读取图像文件的性能对比
Mar 07 Python
Django网络框架之创建虚拟开发环境操作示例
Jun 06 Python
这可能是最好玩的python GUI入门实例(推荐)
Jul 19 Python
pycharm配置QtDesigner的超详细方法
Jan 25 Python
Python中time标准库的使用教程
Apr 13 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
无线电广播的开始
2002/01/30 无线电
php获得当前的脚本网址
2007/12/10 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python super函数使用方法详解
2020/02/14 Python
python中selenium库的基本使用详解
2020/07/31 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
学校介绍信范文
2014/01/14 职场文书
员工评语大全
2014/01/19 职场文书
法律七进实施方案
2014/03/15 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript