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设计模式之观察者模式实例
Apr 26 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
Nov 11 Python
详细解读Python中解析XML数据的方法
Oct 15 Python
快速了解Python中的装饰器
Jan 11 Python
python实现简易版计算器
Jun 22 Python
Python打印输出数组中全部元素
Mar 13 Python
解决Spyder中图片显示太小的问题
Apr 27 Python
Python中fnmatch模块的使用详情
Nov 30 Python
django query模块
Apr 20 Python
基于Python的PIL库学习详解
May 10 Python
Django 创建/删除用户的示例代码
Jul 24 Python
用Python绘制漫步图实例讲解
Feb 26 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+DBM的同学录程序(5)
2006/10/09 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
vue实现简单表格组件实例详解
2017/04/16 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Keras实现DenseNet结构操作
2020/07/06 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
网络安全类面试题
2015/08/01 面试题
建龙钢铁面试总结
2014/04/15 面试题
java程序员面试交流
2012/11/29 面试题
公立医院改革实施方案
2014/03/14 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
妇产科护理心得体会
2016/01/22 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
解析目标检测之IoU
2021/06/26 Python
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
tree shaking对打包体积优化及作用
2022/07/07 Java/Android