第七章 路由 82 名称案例-使用keyup事件实现
<!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事件实现的更多相关文章
- 第七章 路由 72 路由-路由redirect重定向的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第七章 路由 71 路由-router-link的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第七章 路由 70 路由-vue-router的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第七章 路由 77 路由-使用children属性实现路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第七章 路由 76 路由传参-使用params方式传递路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第七章 路由 75 路由传参-使用query方式传递参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器
一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...
- 2017.11.6 JavaWeb-----第七章 JavaWeb常用开发模式与案例
JavaWeb-----第七章 JavaWeb常用开发模式与案例 (1)单纯的JSP页面开发模式 通过在JSP中的脚本标记,直接在JSP页面中实现各种功能.称为"单纯的JSP页面编程模式&q ...
- 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记
注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...
随机推荐
- 【并行计算-CUDA开发】GPGPU OpenCL/CUDA 高性能编程的10大注意事项
GPGPU OpenCL/CUDA 高性能编程的10大注意事项 1.展开循环 如果提前知道了循环的次数,可以进行循环展开,这样省去了循环条件的比较次数.但是同时也不能使得kernel代码太大. 循环展 ...
- 【并行计算-CUDA开发】CUDA线程、线程块、线程束、流多处理器、流处理器、网格概念的深入理解
GPU的硬件结构,也不是具体的硬件结构,就是与CUDA相关的几个概念:thread,block,grid,warp,sp,sm. sp: 最基本的处理单元,streaming processor 最 ...
- python-文件常用操作
文件内建函数和方法: open()——打开文件 read()——输入 readline()——输入一行 seek()——文件内移动 write()——输出 close()——关闭文件 练习:
- Excel输入公式后只显示公式却不计算如何解决？
在使用Excel函数公式的时候,您是否碰到过输入公式,按下Enter键之后,单元格仍只显示公式,而不显示计算结果. 工具/原料 Excel 教程以Excel2013为例 方法/步骤 教 ...
- 小记--------maxwell启动失败解决
查看报错日志信息: com.github.shyiko.mysql.binlog.network.ServerException: Could not find first log file name ...
- JAVA 中为什么String 是immutable的
本文翻译自:http://www.programcreek.com/2013/04/why-string-is-immutable-in-java/ 这是一个很老但很流行的问题,这里有几个原因Stri ...
- Linux系列（3）：入门之正确的关机方法
前言:在Windows(非NT主机系统)系统中,由于是单人假多任务的情况,所以即使你计算机关机,对于别人也没有丝毫影响!不过,在Linux下面,由于每个程序(或者服务)都是在在背景下执行,因此,在看不 ...
- 状压DP--Rotate Columns (hard version)-- Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2)
题意:https://codeforc.es/problemset/problem/1209/E2 给你一个n(1-12)行m(1-2000)列的矩阵,每一列都可以上下循环移动(类似密码锁). 问你移 ...
- Linux操作系统文档
一 Linux操作系统概述 l为什么要学习Linux操作系统: 1. 大部分服务端都是使用Linux操作系统(Django,爬虫,科学运算等项目是部署到服务器中的) 2. 一些企业和学校(国外学校 ...
- Java函数式接口
函数式接口定义且只定义了一个抽象方法.函数式接口的抽象方法的签名称为函数描述符.Java 8的java.util.function包中引入了几个新的函数式接口. 1.Predicate java.ut ...