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 os模块介绍
Nov 30 Python
在Python程序中实现分布式进程的教程
Apr 28 Python
python中异常报错处理方法汇总
Nov 20 Python
老生常谈python函数参数的区别(必看篇)
May 29 Python
HTML中使用python屏蔽一些基本功能的方法
Jul 07 Python
从django的中间件直接返回请求的方法
May 30 Python
Django后端接收嵌套Json数据及解析详解
Jul 17 Python
python并发爬虫实用工具tomorrow实用解析
Sep 25 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
Nov 28 Python
将数据集制作成VOC数据集格式的实例
Feb 17 Python
Python通过len函数返回对象长度
Oct 22 Python
Python连续赋值需要注意的一些问题
Jun 03 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根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python备份文件的脚本
2008/08/11 Python
理解Python中的With语句
2016/03/18 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
详解Python文本操作相关模块
2017/06/22 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
新文化运动的基本口号
2014/06/21 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers