<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

       <!-- 分析： -->

       <!-- 1.我们要监听到 文本框数据的改变，这样才能知道什么时候去拼接 出一个 fullname -->

       <!-- 2.如何监听到 文本框的数据改变呢？？？-->

       <input type="text" v-model="firstname" @keyup="getFullName">+

       <input type="text" v-model="lastname" @keyup="getFullName">=

       <input type="text" v-model="fullname">

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           firstname:'',

           lastname:'',

           fullname:''

         },

         methods:{

           getFullName(){

             this.fullname=this.firstname+'-'+this.lastname

           }

         }

           });

       </script>

   </body>

 </html>

第七章 路由 82 名称案例-使用keyup事件实现的更多相关文章

  1. 第七章 路由 72 路由-路由redirect重定向的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第七章 路由 71 路由-router-link的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 第七章 路由 70 路由-vue-router的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第七章 路由 77 路由-使用children属性实现路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第七章 路由 76 路由传参-使用params方式传递路由参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第七章 路由 75 路由传参-使用query方式传递参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器

    一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...

  8. 2017.11.6 JavaWeb-----第七章 JavaWeb常用开发模式与案例

    JavaWeb-----第七章 JavaWeb常用开发模式与案例 (1)单纯的JSP页面开发模式 通过在JSP中的脚本标记,直接在JSP页面中实现各种功能.称为"单纯的JSP页面编程模式&q ...

  9. 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

随机推荐

  1. 使用logstash迁移elasticsearch数据

    支持同集群复制和跨集群复制 优点:通过简单配置即可实现.零编码. 缺点:logstash 单点运行迁移,速度一般. 以es2.2.1  logstash2.2.1 为例 以下logstash 配置功能 ...

  2. CentOS7+Python3.6利用web.py库进行微信公众平台服务器简易配置，token验证

    1.安装配置Python CentOS7 自带 Python2.7, 我用的是Python3.6.5,需要CentOS7安装配置Python3并和Python2共存的,请看以下教程: CentOS7安 ...

  3. 菜鸟系列Fabric——Fabric 私密数据（6）

    Fabric 私密数据 1.私密数据的定义 如果某个渠道上的一组组织需要将数据与该渠道上的其他组织保密,他们可以选择创建一个仅包含需要访问数据的组织的新渠道.但是,在每种情况下创建单独的通道会产生额外 ...

  4. [转帖]用 OpenSSL 创建可以用于 https 的证书

    用 OpenSSL 创建可以用于 https 的证书 开会时 说到了安全问题 就简单鼓捣了一下 以后还是用nginx 转发比较好一些. https://blog.csdn.net/joyous/art ...

  5. 洛谷 P4198 楼房重建 题解

    题面 首先你要知道题问的是什么:使用一种数据结构,动态地维护以1为起点地最长上升子序列(把楼房的高度转化成斜率地序列)的长度: 怎么做?线段树! 我们在线段树上维护两个东西:1.这个区间内斜率的最大值 ...

  6. Points Division（线段树+DP）2019牛客暑期多校训练营（第一场）

    题意:https://ac.nowcoder.com/acm/contest/881/I 给你n个平面上的点,每个点有a.b两个权值,现在让你划分成两个区域(要求所有A集合里的点不能在任何B集合里的点 ...

  7. one：arguments对象伪数组

    这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...

  8. GTID复制

    什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由google实现,官方MySQL在5.6才加入该功能.GTID是事务提交时创建分配 ...

  9. Qt5.8.0编译QtMqtt库并使用该库连接有人云的例子

    一 编译QtMqtt库Qt5.10才官方支持MQTT,但我用的Qt版本是5.8.0 Mingw_32BIT, 为了在Qt5.8.0上添加MQTT支持,需要自己编译源码 步骤: (1) git clon ...

  10. Laravel 查询数据按照时间分组

    首先取消严格模式: // config/database.php // 'strict' => true, // 严谨模式注释掉 查询构造器代码: //查询构造器部分代码 })->with ...