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基础入门学习笔记(Python环境搭建)
Jan 13 Python
深入解析Python中的descriptor描述器的作用及用法
Jun 27 Python
python中利用xml.dom模块解析xml的方法教程
May 24 Python
python中安装Scrapy模块依赖包汇总
Jul 02 Python
python求最大值最小值方法总结
Jun 25 Python
解决django服务器重启端口被占用的问题
Jul 26 Python
python实现对服务器脚本敏感信息的加密解密功能
Aug 13 Python
python3.6编写的单元测试示例
Aug 17 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
Dec 04 Python
Python绘图之二维图与三维图详解
Aug 04 Python
python之随机数函数的实现示例
Dec 30 Python
matplotlib自定义鼠标光标坐标格式的实现
Jan 08 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP如何编写易读的代码
2007/07/10 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python字节单位转换实例
2019/12/05 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
少儿节目主持串词
2014/04/02 职场文书
2014年接待工作总结
2014/11/26 职场文书
小学中队长竞选稿
2015/11/20 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
python中 Flask Web 表单的使用方法
2022/05/20 Python