<!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. Fabric1.4 链码开发，开发模式下的测试

    关闭之前已启动的网络环境 sudo docker-compose -f docker-compose-cli.yaml down 进入devmode目录:  cd ~/go/src/github.co ...

  2. 论文阅读及复现 | Effective Neural Solution for Multi-Criteria Word Segmentation

    主要思想 这篇文章主要是利用多个标准进行中文分词,和之前复旦的那篇文章比,它的方法更简洁,不需要复杂的结构,但比之前的方法更有效. 方法 堆叠的LSTM,最上层是CRF. 最底层是字符集的Bi-LST ...

  3. lua的table库中的常用函数总结

    table是Lua语言中的一种重要的数据类型, table 的一些特性简单列举如下: (1).table 是一个“关联数组”,数组的索引可以是数字或者是字符串; (2).table 的默认初始索引一般 ...

  4. Linux通配符知识深度实践详解

    注意:linux通配符和三剑客(grep.awk.sed)正则表达式是不一样的,因此,代表的意义也有较大的区别. 通配符一般用户命令行bash环境,而Linux正则表达式用于grep.sed.awk场 ...

  5. [转帖]字符编码笔记：ASCII，Unicode 和 UTF-8

    字符编码笔记:ASCII,Unicode 和 UTF-8 http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 转帖 ...

  6. Redis客户端相关

    1.redis是什么 redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库.redis的官网地址,非常好记,是redis.io.目前,Vmware在 ...

  7. T100——q查询，子母查询（汇总——明细）练习笔记

    范例: 代码: #add-point:input段落 name="ui_dialog.input" INPUT BY NAME g_master.bdate,g_master.ed ...

  8. Eclipse怎么改变@author 姓名

    1 点击windows  然后选择 点击进去选择搜索code Templates  点击选择出现下面的页面 点开comments,里面有给方法,变量 ,类等加注释设置的模板 如:点击Methods  ...

  9. Aveva Marine 新建项目001

    1# 项目代号定义,三个字符,例如Abc 2# 新建文件夹,命名为“Abc” 3# 新建文件名为evars.bat文件,放到项目文件夹的根目录 内容为: SET Abc000=项目文件夹路径\Abc0 ...

  10. 【原创】大数据基础之Kudu（4）spark读写kudu

    spark2.4.3+kudu1.9 1 批量读 val df = spark.read.format("kudu") .options(Map("kudu.master ...