|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
( E; l$ q0 F0 k' ?& @: p9 n Q
$ ?+ }. J0 h. U. h- n9 x U
<!DOCTYPE html>
* M% x- _- |. I, V0 B& \, r- B4 z& e<html lang="en">
/ n" N' N& F) o9 o0 U& |& ^: r4 n# S& C
<head>
" C" R' Z7 N- u q3 r <meta charset="UTF-8">
( ~6 F$ H( W3 C* a, J+ q7 a. n% Q <title>Event Bind</title>
! V r3 y9 x7 q8 y* _ <script src="./vue.js"></script>2 O9 }& e8 A8 _3 E2 Y
</head>
7 q! g* d8 t' y* E: @* O' m+ a$ o" Z+ J+ y- a
<body>
2 I5 V2 X/ J8 U. Z4 k <div id="root">. C. D/ P( A! X7 a: z
First Name: <input type="text" v-model="firstName" />2 P: e8 r' s, d6 V
Last Name: <input type="text" v-model="lastName" />
) ^; k0 W: D z( \& @0 e, ^: v <div>0 y) r& x9 p2 j1 E& Q2 v* V, d5 }
Full Name : {{fullname}}
7 i0 @* h% {- Y' _. a# |1 x% H </div># {7 M# b, z% @) s" P* U3 g
<div>
! t. A$ m0 m& |( i; j0 B <h2>{{changeTime}}</h2>0 `3 Z7 R6 d2 v/ F |* k% b
</div>
0 [5 ?# }( F3 x' P% [+ H5 q, B </div>
. O" k: N/ B, r; a <script>2 E" R) A; z( N
new Vue(/ I8 L% e- |9 }
{
z9 G$ f6 V1 H% z- q" q/ c el: root,
8 q" j( r5 \, u% V data: {! E3 m7 o. E( t2 d
firstName: '',/ M" @3 t7 M2 F1 o
lastName: '',
$ H. h6 l" i- U3 H! ]' ^3 G4 h- W changeTime: 0
8 {/ S; F, D( G ?5 A& U3 f7 L },: R( g+ K7 _& t4 L4 {
methods: {
5 c2 {3 ], q; _9 t+ I! T; Q. X" a$ J* Q$ |" E
},
. B* \* _/ P+ E+ ~6 i7 o- @* P computed: {
- M+ D; h+ ~* S5 \3 B fullname: function () {
6 \4 O) q7 D( K& s M& u0 u& v, i return this.firstName + ' ' + this.lastName;: h& J0 x) c* }3 T4 `
}& a7 |: q' k, x4 o3 V
},5 F/ `( a S- W! ]/ O
waTCh: {
6 {, W/ I; b. q fullname: function () {
: T: n; X" r' n' ` this.changeTime++;
: R) N& Q) [, l( |. L- p' t }" q; O9 } ]4 a I4 F/ [: [" ^
}
% M# G- J2 Z) k' P2 K) q7 X }
# {+ \9 {$ o/ e" y5 k/ [; _ ). _" C% p) X& h( N+ ^7 n( z
</script>
7 U- g; y4 @' Z2 e</body>
# B+ L! }+ M' n. i' P
3 P" _; | M2 y% E$ d" J; g/ X</html>
& A# p9 w/ Y: ?) X, h( Y, S* _& o5 ?/ b$ t9 n% v( D! w3 k
* b1 Z' q( k9 y9 H$ }7 i3 W
|
|