|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
0 J9 I# J( k4 P. w% p) }
+ W2 T0 J7 v7 b! F1 i<!DOCTYPE html>9 t3 _; }! d' o$ v9 F O8 w4 [* ~
<html lang="en">
: L) A$ n7 R5 ], R# P4 S' {0 m! ?, ]0 V, \
<head>" W% ]6 Z2 U- h9 h! k$ L( ?+ O0 V S
<meta charset="UTF-8">
7 ~! M& h0 `5 J <title>Event Bind</title>
; e. d" f1 n( @' o: j# X! }- k5 y <script src="./vue.js"></script>& _0 B1 D2 P! D0 ~, b. M
</head>
) O$ N3 S" R+ E1 `8 f+ M6 Q- y- d0 ~8 v* a* j, T4 L9 L! j( i
<body>3 B5 I z, G# m1 _, q
<div id="root">3 I( v" l3 \% {7 c2 T
First Name: <input type="text" v-model="firstName" />. V+ o" r, E! w, V; X
Last Name: <input type="text" v-model="lastName" />/ L0 J" N$ d- }" V
<div> _1 {5 f" m# W9 r
Full Name : {{fullname}}
+ g+ A$ P9 }- M k/ w </div>
" ~0 Z0 }2 } c/ Q0 J. I <div>
4 A, V1 v. p3 h9 c5 h <h2>{{changeTime}}</h2>, y3 T+ [ g! ^
</div>3 P1 T* I+ Q: O; G( T
</div>
; a" Y' z" W5 M- _! u <script>, [1 E1 p# Y2 g1 @
new Vue(% L9 B6 ]) A' A3 u
{7 P& ]5 c6 n- Z4 K3 R
el: root,
0 J5 N1 B9 z9 g/ _2 |# |3 }- C( s d data: {
$ b# D% A b5 B/ a1 \ firstName: '',9 i( [! S2 s5 g9 r/ [
lastName: '',$ S* U9 B' X4 R# c
changeTime: 01 ?& F J6 W* ^
},
- T1 z2 R4 _; D, T+ s1 u4 G6 |4 P methods: {, j) q2 g" F, y% e
* F" ^0 O2 \, u( u+ N. S. O },
, @/ m% M4 e g1 {. z* H6 G computed: {* ~0 g$ v- x+ b( u4 q- S- S
fullname: function () {
7 q) _" J( [* } return this.firstName + ' ' + this.lastName;
# s& @ q0 r) a7 p* K# V) s2 o- U }) F }4 w. A1 Q6 E
},
! \! Y: M4 j) f0 f( b waTCh: {
9 |/ S2 T5 X+ [, L G! [ fullname: function () {0 w3 B: Y6 t: \$ ?/ l
this.changeTime++;4 D8 l2 @; K+ C7 c) `
}2 l! o( F& K r J% M$ A
}
$ y# z3 u2 P2 _1 ~2 W1 m5 a% i0 X. f }
4 [; u7 M; }) N )
8 j% D9 g3 \" t! |& I </script>
2 s+ E* L e7 W</body>
" u6 g2 X: u R
. P1 U/ _, t2 c8 \6 N* o</html>3 _( k& X" G& F& k: Y& n4 V
3 U1 ]6 ^9 \% E- Y4 s
( ?$ B" x& _; _, R& Y3 U7 Y |
|