zoukankan      html  css  js  c++  java
  • 第七章 路由 82 名称案例-使用keyup事件实现

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4   <head>
     5     <meta charset="utf-8">
     6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
     8     <title>Document</title>
     9     <!--1.导入Vue的包-->
    10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
    11   </head>
    12 
    13   <body>
    14       <div id="app">
    15 
    16       <!-- 分析: -->
    17       <!-- 1.我们要监听到 文本框数据的改变,这样才能知道什么时候去拼接 出一个 fullname -->
    18       <!-- 2.如何监听到 文本框的数据改变呢???-->
    19       <input type="text" v-model="firstname" @keyup="getFullName">+
    20       <input type="text" v-model="lastname" @keyup="getFullName">=
    21       <input type="text" v-model="fullname">
    22       </div>
    23 
    24       <script>
    25           //创建 Vue 实例,得到 ViewModel
    26           var vm =  new Vue({
    27               el:'#app',
    28         data:{
    29           firstname:'',
    30           lastname:'',
    31           fullname:''
    32         },
    33         methods:{
    34           getFullName(){
    35             this.fullname=this.firstname+'-'+this.lastname
    36           }
    37         }
    38           });
    39       </script>
    40   </body>
    41 </html>
  • 相关阅读:
    oo第三单元学习总结
    oo第二单元学习总结
    OO第四单元UML作业总结兼OO课程总结
    OO第三单元JML作业总结
    OO第二单元电梯作业总结
    OO第一单元总结
    OOUnit4Summary
    OOUnit3Summary
    OOUnit2Summary
    OOUnit1Summary
  • 原文地址:https://www.cnblogs.com/songsongblue/p/11010648.html
Copyright © 2011-2022 走看看