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实战教程之自动扫雷
Jul 13 Python
pygame游戏之旅 添加游戏界面按键图形
Nov 20 Python
通过shell+python实现企业微信预警
Mar 07 Python
如何用Python破解wifi密码过程详解
Jul 12 Python
解决Djang2.0.1中的reverse导入失败的问题
Aug 16 Python
python文件和文件夹复制函数
Feb 07 Python
Python处理mysql特殊字符的问题
Mar 02 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
Oct 31 Python
python Matplotlib基础--如何添加文本和标注
Jan 26 Python
利用Python实现最小二乘法与梯度下降算法
Feb 21 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
Feb 22 Python
如何使用Python提取Chrome浏览器保存的密码
Jun 09 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变量作用域的深入解析
2013/06/03 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
vue cli 全面解析
2018/02/28 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python实现的计数排序算法示例
2017/11/29 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
详解python深浅拷贝区别
2019/06/24 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
掌上明珠Java程序员面试总结
2016/02/23 面试题
小学教师年度个人总结
2015/02/05 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技