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数据类型详解(四)字典:dict
May 12 Python
详解python之配置日志的几种方式
May 22 Python
利用python3随机生成中文字符的实现方法
Nov 24 Python
基于Django filter中用contains和icontains的区别(详解)
Dec 12 Python
Python+selenium实现截图图片并保存截取的图片
Jan 05 Python
用python一行代码得到数组中某个元素的个数方法
Jan 28 Python
django框架基于模板 生成 excel(xls) 文件操作示例
Jun 19 Python
python检查目录文件权限并修改目录文件权限的操作
Mar 11 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
Mar 30 Python
python使用自定义钉钉机器人的示例代码
Jun 24 Python
python进度条显示之tqmd模块
Aug 22 Python
python 使用openpyxl读取excel数据
Feb 18 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读取javascript设置的cookies的代码
2010/04/12 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python单例模式的多种实现方法
2019/07/26 Python
python构造函数init实例方法解析
2020/01/19 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
升职自荐信范文
2013/10/05 职场文书
校园活动策划书范文
2014/01/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
《太阳》教学反思
2014/02/21 职场文书
销售求职信范文
2014/05/26 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
党组织结对共建协议书
2016/03/23 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
Golang入门之计时器
2022/05/04 Golang