vue.js实现输入框输入值内容实时响应变化示例

yipeiwu_com6年前Python基础

本文实例讲述了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>www.jb51.net 输入内容实时显示</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.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:

希望本文所述对大家vue.js程序设计有所帮助。

相关文章

Python 项目转化为so文件实例

Python 项目转化为so文件实例

思路是先将py转换为c代码,然后编译c为so文件,所以要安装以下内容: python 安装:cython pip install cython linux 安装:python-de...

python 运算符 供重载参考

二元运算符 特殊方法 + __add__,__radd__ - __sub__,__rsub__ * __mul__,__rmul__ / __div__...

python批量修改文件后缀示例代码分享

ipad的goodreader对JS文件支持不太好,虽然可以读取它但总是无法退出,回不了goodreader的主界面,因此我需要把js文件批量变成纯文本。基于这个目的,我搞了下面一个小应...

python中的break、continue、exit()、pass全面解析

1、break break是终止本次循环,比如你很多个while循环,你在其中一个while循环里写了一个break,满足条件,只会终止这个while里面的循环,程序会跳到上一层whil...

栈和队列数据结构的基本概念及其相关的Python实现

先来回顾一下栈和队列的基本概念: 相同点:从"数据结构"的角度看,它们都是线性结构,即数据元素之间的关系相同。 不同点:栈(Stack)是限定只能在表的一端进行插入和删除操作的线性表。...