<!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. jumpserver跳板机（堡垒机）安装

     jumpserver跳板机(堡垒机) Jumpserver 是一款由Python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能,基于ssh协议来管理,客户端无需安装agent,助力互联网企业 ...

  2. [转帖]方正数码发布基于龙芯3A3000系列整机

    方正数码发布基于龙芯3A3000系列整机 http://www.loongson.cn/news/company/730.html 方正数码也出过龙芯相关的服务器和PC笔记本等 发布时间:2019-0 ...

  3. 小记--------spark的宽依赖与窄依赖分析

    窄依赖: Narrow Dependency : 一个RDD对它的父RDD,只有简单的一对一的依赖关系.RDD的每个partition仅仅依赖于父RDD中的一个partition,父RDD和子RDD的 ...

  4. strCmd.Format("delete FROM userTable where name = '%s'", name);

    string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...

  5. 关于python中的包，模块导入的问题详解（二）

    from import导入 紧接着的是from xx import xx  语法 1 ################ 2 from my_moudule import name 3 print(na ...

  6. Elastic Search中filter的理解

    在ES中,请求一旦发起,ES服务器是按照请求参数的顺序依次执行具体的搜索过滤逻辑的.如何定制请求体中的搜索过滤条件顺序,是一个经验活.类似query(指search中的query请求参数),也是搜索的 ...

  7. Elastic Search对Document的搜索

    在ES中使用的重点.ES中存储的数据.核心就是为了提供全文搜索能力的.搜索功能非常重要.多练. 1 query string searchsearch的参数都是类似http请求头中的字符串参数提供搜索 ...

  8. Git 入门：概念、原理、使用

    出处: git入门:概念.原理.使用 git和Github 概念 Git --- 版本控制工具(命令). git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.git ...

  9. redis 学习（18）-- AOF

    redis -- AOF 什么是 AOF 通过日志方式将redis中的写命令进行日志记录,保存在硬盘文件中. 日志记录的实质是将写命令写在硬盘的缓冲区中,再根据相关策略把数据刷新到磁盘中. 当redi ...

  10. mac手册汉化 2019

    1.安装依赖 brew install automake brew install opencc 2.编译 wget https://github.com/man-pages-zh/manpages- ...