<!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. 深入理解C语言-深入理解数组

    数组,作为C语言中常见的复杂数据类型,了解其本质有助于深入了解C语言 数组概念 元素类型角度:数组是相同类型的变量的有序集合测试指针变量占有内存空间大小 内存角度:联系的一大片内存空间 数组初始化 数 ...

  2. PowerShell .Net整套环境搭建及部署系列

    此系列包含一套完整的集群部署,全是个人原创(除第一个是摘抄的),转载请注明出处 其中DFS部分在国内资料极少,且全是重复的,还是外面好些,有问题可以给出解决方案 若内容有不详之处或你也同样被DFS所困 ...

  3. 查询统计SQL分组求和使用小技巧

    我们在做查询统计时,肯定会遇到将查询结果再次分组求和这种需求,但是往往查询的sql本身就比较复杂,再使用分组函数不太可能,那么这时候我们就想到了用临时表的办法,通过联合临时表我们就可以获得想要的分组求 ...

  4. ARTS 第一周打卡

    Algorithm : 做一个 leetcode 的算法题 1.只出现一次的数字 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算 ...

  5. localStorage 杂记

    localStorage html5标准 Web 存储现在的主流浏览器,包括IE 8+.Chrome 4+.Firefox 3.5+.Opera 10.5+.Safari 4+.iPhone 2+.A ...

  6. 前端 CSS 2

    无序列表去除自带的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. LeetCode 206——链表反转（JAVA）

    题目: 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶:你可 ...

  8. python — 进程

    目录 1. 进程 1.进程就是一个运行中的程序(是对正在运行程序的一个抽象). 2.程序和进程之间的区别: 程序只是一个文件 进程是这个文件被CPU运行起来了 程序是永久的,进程是暂时的. 3.进程- ...

  9. golang net包学习笔记

    阅读源代码发现在net包中主要实现了ip.tcp.udp.unix等通信方式.它们大致可以分成两大类:其一,ip.udp.unix(DGRAM),这是一些无链接的协议,其二,tcp.unix(STRE ...

  10. Selenium IDE for firefox

    第一次接触selenium. 首先, selenium支持的 Firefox版本是17.0~34.x. 打开火狐历史版本:http://ftp.mozilla.org/pub/firefox/rele ...