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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • Vue.js数字输入框组件使用方法详解

    Vue.js数字输入框组件使用方法详解

    本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

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

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

    本文实例讲述了vue.js实现输入框输入值内容实时响应变化的方法.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sca

  • js从输入框读取内容,比较两个数字的大小方法

    因为从输入框读取的内容是String类型的,所以直接比较的话,是用asc码来比较的,如果要比较数字的大小应该加上parseFloat, 比如: if(parseFloat(amnt1) < parseFloat(amnt2)){} 以上这篇js从输入框读取内容,比较两个数字的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    一.效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求.下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二.无缝滚动原理 1.容器宽高固定,超出内容隐藏: 2.内容准备2份,现参与滚动的内容有A.B两份,向左滚动: 3.滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果: 4.在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A.B内容一模一样,这个复原过程很难看出来: 5.循环第3步: 三.代码 1.html部分 <template> <div c

  • Vue.js每天必学之内部响应式原理探究

    Vue.js每天必学之内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题.下面我们开始深挖 Vue.js 响应系统的底层细节. 如何追踪变化 把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.这是 ES5 特性,不能打补丁

  • vue.js中ref和$refs的使用及示例讲解

    vue.js中ref和$refs的使用及示例讲解

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件: vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的:类似于jquey中的$(".xxx

  • vue.js中methods watch和computed的区别示例详解

    vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • Vue.js弹出模态框组件开发的示例代码

    Vue.js弹出模态框组件开发的示例代码

    前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发

随机推荐