|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ D* E: d$ ]: j" c. Y
! G1 ~7 W+ T6 k* d# Z
<!DOCTYPE html>( ~; s+ b' d' j
<html lang="en">) i: r* V: ^% u- K
0 _* Y1 _- G( I" Y# D6 Q
<head>
2 c3 w& T5 f' x6 I5 o* Q <meta charset="UTF-8">1 t" \8 d. f! \5 i- l9 h) L
<title>Event Bind</title>9 f1 g G5 U2 P4 A. E4 W
<script src="./vue.js"></script>
* U2 q2 Y8 i# T3 i</head>
2 ]6 I$ ?8 ^' h4 ^& _1 \! ^3 ]0 j+ C8 k8 G
<body>/ n$ @% |5 b' Y$ G
<div id="root">1 p7 T5 E, {, |+ P. y
First Name: <input type="text" v-model="firstName" />
1 ~- i1 i1 X" f) R Last Name: <input type="text" v-model="lastName" />8 `9 v& G. ?! k g. k, ]9 p3 h8 G
<div>. I2 M8 [" G) q$ f$ a$ l
Full Name : {{fullname}}; V: L- }8 q4 E. X8 m. y
</div>
+ {; o: `: G7 c* ?" M: ?6 h <div>
. h0 u& c# P, R- i: g- K2 s <h2>{{changeTime}}</h2>* a+ R1 N6 o- J- M% L6 b! b6 S% n
</div>* U, q6 @# Z7 Q4 D7 e
</div>
# n! G4 s, K {- k2 A% E <script>
h3 q: i$ H" w new Vue(
# N* t# b( w' P8 E5 ?8 X {
& d: B* k" r6 Z: V7 r" e% Y el: root,
7 f( O0 f; c4 {" [ data: {/ o( I5 |4 I- J% N" X* P1 K
firstName: '',' x8 m. w* `5 r8 a7 @
lastName: '',* o/ R6 f3 J6 g& e# G! \7 n
changeTime: 06 S8 o1 r" `" k. _* {+ T
},
b/ v' B# W1 ]/ X9 Q) Z methods: {
, E$ A' X3 o) d, ]# m; o4 c4 k5 q. J- i; ^
},# B$ J! U0 x- M" Q
computed: {
3 W( m2 Y- J( w0 e. T fullname: function () {- L! |( m* d! a8 I- L
return this.firstName + ' ' + this.lastName;
* J3 y9 F# C% w2 w) E }. p6 Z( c9 v: s7 V; g& w, Y
},- U1 U$ i7 T* W" c
waTCh: {
7 [; [4 i; i* p' S# o' o fullname: function () {6 t' {* f4 k4 p( M. j
this.changeTime++;
" b$ z" f" C$ A6 q }6 z2 q, I8 D. Q
}; m9 H' Y& W5 j" T+ u. x
}
) U# u6 N5 g9 K6 h) f ); s. D+ p3 e6 w, I- b
</script>3 T. u5 I" s3 v6 c4 r- P) g; `% N
</body>
- a2 T! f9 b$ O
$ b0 y1 H" L5 B( o& v</html>
' C, F' g% ?1 Q5 P5 g, [; M- T6 N' }! A' {2 R0 `
; i% w# X" k: `* @% i, ? |
|