|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
/ D3 j* Y9 K+ q" F U# h7 G$ D7 q m( Z7 ^8 |
<!DOCTYPE html>
' ?7 p1 s1 R( O<html lang="en">5 D$ B( N, A) q |; w4 B L2 w
( J. _' C$ P$ A C. }2 R<head>, D' @7 y9 Q$ ~. \8 \- A
<meta charset="UTF-8">
; Z) H3 n/ b0 V- v2 x <title>Event Bind</title>2 L2 k' g- z8 d6 X) P, [. j+ z9 }
<script src="./vue.js"></script>+ K4 h2 K* k- t. E
</head>; i( P. i9 N5 \
8 `2 f9 P5 n" C' Z! N
<body>
+ B: z+ z3 R2 p+ \, a K <div id="root">
1 k/ L8 Z& C7 ^4 Q- u+ L5 K7 }9 T First Name: <input type="text" v-model="firstName" />& D/ g+ W: K2 t* R& H. ^( W
Last Name: <input type="text" v-model="lastName" />/ d2 ?* t! m$ O3 g' f5 ~
<div>9 z: j O' B: n1 k, i8 ]
Full Name : {{fullname}}' j, s! P( ~7 X3 g3 A2 s- p
</div>
* |. p1 Q2 c+ r. u! S <div>
& [3 y+ F/ C. x" c" j3 ^1 M3 [. C <h2>{{changeTime}}</h2>
1 B7 J- ^ [ B6 r7 |" S </div>
# e& t/ y1 } X5 Z </div>
/ J5 [7 a5 S( i7 q, y+ m c. C <script>" p: f5 ?, M/ p0 k
new Vue(7 F! H. z- V$ i) O/ r- l7 }
{
+ {: O( n) T; H* x2 j/ w1 [/ {' m el: root,
6 o8 N( P- D4 b data: {
" }2 N5 c# k( _) i* F firstName: '',
9 f e% ^- w- Y3 h& O4 y lastName: '',
( p* i/ @7 h5 _( T changeTime: 0
! q! l' \, F4 @6 m },
3 G* P. [# ~6 N$ {9 }" q$ f9 b. l methods: {
3 _" t7 O7 t$ h4 A5 ~% ]$ l+ _/ B1 g; q$ o @; H* `8 `2 c3 |' _" s7 G
},5 H5 L+ @1 {! ?/ p1 j4 A
computed: {
5 B# K% k, s7 X7 i& Q fullname: function () {. Z* z1 \- ^) Z0 o0 k; `
return this.firstName + ' ' + this.lastName;/ _- {1 o0 h4 }% c% y; ]7 \" |
}/ N6 e( R0 `) x; v, i" P. K1 {! k* j
},
5 F! K Z) j9 r# V0 [! b waTCh: {: y& z' R- \% u
fullname: function () {
$ l# V. s& g" V1 l& p5 @* l1 X this.changeTime++;5 v& `" D! ^6 n: ^1 @
}
. U, E5 M. k/ f) e }
# z' b! B+ g8 w/ W! o4 `2 [ }
8 K$ v$ B+ I# Y; C5 u) C )
K- W2 S0 J9 Q& q* T) M </script>
+ P! S0 [9 K: b& t</body>
; P" N( X9 `( B( S1 D3 i; L, j. }2 f, B4 T. V
</html>
$ T' d! u8 N; l: ^$ f0 |# q8 t" }) o3 z" E% b
+ L. B; T2 X" j1 O4 ? |
|