<!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. ValueError: numpy.dtype has the wrong size, try recompiling

    问题ValueError: numpy.dtype has the wrong size, try recompiling解决 这是因为 Python 包的版本问题,例如安装了较旧版本的 Numpy, ...

  2. #学习笔记：CentOS7学习之十三（2）：磁盘介绍与管理

    1.磁盘分区工具与挂载 1.1 硬盘分区符认识: MBR概述:全称为Master Boot Record,即硬盘的主引导记录. 硬盘的0柱面.0磁头.1扇区称为主引导扇区(也叫主引导记录MBR).它由 ...

  3. SaltStack安装部署

    SaltStack安装部署 安装: 一. master: 1. 配置yum源安装 # rpm --import https://repo.saltstack.com/yum/redhat/6/x86_ ...

  4. 阿里云云计算ACP专业认证考试

    阿里云云计算专业认证(Alibaba Cloud Certified Professional,ACP)是面向使用阿里云云计算产品的架构.开发.运维类人员的专业技术认证. 更多阿里云云计算ACP专业认 ...

  5. Java list 转树tree的三种写法

  6. xml 表格

    设置单元格样式 <Style ss:ID="唯一id字符" ss:Name="单元格样式"> [内部通常用来设置 Alignment对齐.Font字 ...

  7. linux常用的bash指令

    文本处理 awk sed grep sort uniq cat cut echo fmt tr nl egrep fgrep wc 进程监视 ps top htop atop lsof 网络 nmap ...

  8. 6-Perl 标量

    1.Perl 标量标量是一个简单的数据单元.标量可以是一个整数,浮点数,字符,字符串,段落或者一个完整的网页.以下实例演示了标量的简单应用:实例#!/usr/bin/perl$age = 20; # ...

  9. C#解决界面闪烁

    添加缓冲: private void SetDoubleBuffer() { base.SetStyle( ControlStyles.OptimizedDoubleBuffer | ControlS ...

  10. 【js】面向对象学习资料

    1.面向对象模式: https://m.jb51.net/article/74549.htm 2.面向对象基础篇 http://www.cnblogs.com/chiangchou/p/js-oop1 ...