|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 |2 b7 I' R) n; I
7 N! t' O/ g% y7 W4 l
<!DOCTYPE html>
6 `, {1 ?. Y+ E- ]- r; q<html lang="en">* u0 A9 v7 H8 X# z
7 y& ^/ ]4 Q7 A
<head>
" P+ P" l! q# S ?% Y" {9 u6 F7 | <meta charset="UTF-8">- S8 D4 T+ Q2 M" r) E3 {. U
<title>Event Bind</title>
6 O/ ~7 V1 c9 [5 Q2 ~( L6 M" \ <script src="./vue.js"></script>% T, l; {$ R. v6 v
</head>% }+ x9 O* k& b; G8 g4 ^
3 j9 C" |# L9 C<body>
. R/ e U5 z7 U8 ~ U1 o# F <div id="root"> Z; y2 h' S: ~ w4 S y! n
First Name: <input type="text" v-model="firstName" />9 f" T% {$ N2 A: O# o* w" V: n3 n+ E
Last Name: <input type="text" v-model="lastName" />
( k) [) L% G( W <div>0 h4 T3 Z& |' o) V0 S7 a- _
Full Name : {{fullname}}
: A: H8 ?( F7 u </div>% m, {, [- h0 F( c- D& S: o& [
<div>5 j, |0 E' L/ P8 @$ |+ I
<h2>{{changeTime}}</h2>* h H% h; h2 A" ^
</div>
" J* Z2 ?9 e7 s2 @, c3 d% V </div>
3 w0 h% o1 S7 O+ K+ r/ [* l+ N# P9 S <script>
' w5 y5 ?/ H% o5 ?$ u; A new Vue(
% n! G+ O! l3 o* B2 a5 h; H( l% N {
. i P5 N1 M7 U' C h, F el: root,1 Y% P$ R0 ]$ B& {
data: {. b9 c- L# y) N9 f* K+ l( u) y
firstName: '',
2 F8 D/ k( m: B1 Y0 ~( G lastName: '',: H/ K& ~! T, m: ^6 ^7 f: Q
changeTime: 0
+ W) w4 C! Z* d$ c+ l Z },) ^# W" Y9 z+ h
methods: {( ]1 x% X9 F0 Q8 A
7 R3 J. a) L) A' Y: s4 G },
, d+ }- W4 ]% v6 @ computed: {
8 q# n. Z; \, w fullname: function () {
* g! P: Y) {9 N- A d return this.firstName + ' ' + this.lastName;
D; E6 l% C. c }
% o, C! K u1 o$ f) {* k, y },, |1 T5 Q0 [3 j( v2 u4 f
waTCh: {
- G, N7 }+ s4 v2 M0 i# n. N fullname: function () {
+ l# |, G- E2 }' M" Q this.changeTime++;3 h$ A3 _! c5 e5 f# X* y$ V
}' Y. _6 t6 b8 ~5 ]4 w2 Q
}# y, S8 c2 E* R3 [" |5 `7 R4 r6 j
}
; y+ |4 M6 e5 b* ^! q- h )
. t' A9 T( Q/ K" k, ` </script>
8 G, Y$ f. b2 E' @) g' U1 k</body>
4 O/ T/ V+ B$ g! M2 e
5 _: P$ A6 T V: _! X</html>
% x3 y' |! R, Z& R0 m" I* j# ?6 ^- D k' ~ P$ @$ C
. z9 m5 e. s! f& n |
|