|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
& s# g; p" U& j" F
7 I; _! q u+ n3 b
<!DOCTYPE html>
) U+ K9 v7 h& q: H<html lang="en"># y7 a9 b M# l) N: G O
# v. a6 R9 z& v3 `: s5 y' D* G+ `$ E<head>* i" |! G$ `/ p
<meta charset="UTF-8">/ W+ F5 V+ z, B
<title>Event Bind</title>
! C" Y$ V0 A1 E! L <script src="./vue.js"></script>
7 \, P2 V% C r/ B; e! w, X</head>
/ Z3 l" ], o8 W$ ^. f$ S6 e% J
" p E$ O7 B" l/ I) O<body>
! l, g6 K0 q* P& X <div id="root">" B( G1 Y2 J! D [
First Name: <input type="text" v-model="firstName" />/ F* U8 W: Y9 T5 N
Last Name: <input type="text" v-model="lastName" />/ K; @4 Q3 B+ b1 h8 P( R
<div>4 X. ~ {- e+ H9 [
Full Name : {{fullname}}
; q4 ~& p- b8 w; L8 q& { </div>
& _9 @5 M4 j' F+ W2 _3 e2 S <div>' `1 S& @7 p, W* @. r( E
<h2>{{changeTime}}</h2>
; h- w) h% M& u; T% q </div>
: B4 L$ B, R0 C1 ] </div>
% u7 Z) D. F9 \# C( G0 p4 ~ <script>6 n- o1 J/ T1 A( \' K
new Vue(( \0 J! G2 e( q, r% Y
{: R' R$ a. \/ v- S9 ~ S# N, ?) p
el: root,. ?7 @8 w3 u, Z/ R
data: {( H# i6 j: \- \" [- j
firstName: '',
( k+ t8 h0 P |; h e5 Q! ]. @# N lastName: '',; a3 G x+ X3 Q
changeTime: 0/ j5 ^2 l# y( D1 C Q$ J$ b
},
0 t F7 |) P6 C/ i methods: {
' S! G) W/ c% E, i2 R M; Q* b9 D* f2 V- g& C4 _% @/ t6 Y
},
# Z$ E, I7 S0 j) H4 ~# g7 u6 c7 ] computed: {
( t4 u3 v! i$ ]7 U6 C fullname: function () {" z& e5 c; W: c' U; d' B) ~
return this.firstName + ' ' + this.lastName;
7 Z9 c& {8 X7 y- _, T9 |* R5 V }& P, Q2 z O0 H9 x4 ]' z# Z
},. t% [& W$ k- b
waTCh: {
6 P2 M9 N& f5 z6 A fullname: function () {
3 o" e$ V4 Y$ P this.changeTime++;
0 J! [, B# r4 Y' j2 _: P }3 d p) O2 w5 T7 X( K2 n6 L
}
% C7 F5 h% C; b+ O0 ~% t& T }
' ?, I& I2 o! O )& K- g- ?3 X% a
</script>1 t* s; D: d. S3 \% P+ _
</body>
/ |2 F c; g8 i8 J/ G4 D- \) U. F$ q, O' G' m' ^2 L* x* j
</html>! O; o: i9 r y! O9 ?/ b3 e: ]# W
( N. }) i8 g0 o' B: J% l. _4 O- } e& X
|
|