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之集成开发环境(IDE)
Sep 12 Python
50行Python代码实现人脸检测功能
Jan 23 Python
Python os.rename() 重命名目录和文件的示例
Oct 25 Python
Python中的枚举类型示例介绍
Jan 09 Python
Django 实现图片上传和显示过程详解
Jul 18 Python
numpy.meshgrid()理解(小结)
Aug 01 Python
Python操作远程服务器 paramiko模块详细介绍
Aug 07 Python
Python超越函数积分运算以及绘图实现代码
Nov 20 Python
使用Pycharm分段执行代码
Apr 15 Python
Pytest如何使用skip跳过执行测试
Aug 13 Python
pycharm 复制代码出现空格的解决方式
Jan 15 Python
Python 多线程之threading 模块的使用
Apr 14 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操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
javascript 函数使用说明
2010/04/07 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
js闭包实例汇总
2014/11/09 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue项目上传Github预览的实现示例
2018/11/06 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
4s店销售经理岗位职责
2014/07/19 职场文书
聘任证明怎么写
2015/03/02 职场文书
历史博物馆观后感
2015/06/05 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang