|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
1 p3 }% X8 y, n: e
3 y/ Q# e/ M* P
<!DOCTYPE html>. i% D9 `. d: Q0 x7 I! L3 B7 }
<html lang="en">
3 h+ q$ M* `9 y' e9 ?. k( G; J
" [' ~ S1 n H<head>
4 X8 ?/ D1 a! x9 c4 v- { E/ Y <meta charset="UTF-8">
, u* \2 r A1 k <title>Event Bind</title>
9 Y% V, }( ]: ]7 K <script src="./vue.js"></script>
9 u ] h9 \% |& r8 ]</head>. _0 t9 O$ `1 e) [4 r
" t; p9 A- x1 Z5 R$ N<body>7 F7 z+ X% n* S/ }
<div id="root">4 F: A7 A6 _& _- X
First Name: <input type="text" v-model="firstName" />8 s+ |/ p- V( b/ x- x0 f. d
Last Name: <input type="text" v-model="lastName" />
4 @4 o4 _3 [5 L( k, K <div>- k1 [+ l3 f1 D
Full Name : {{fullname}}! M; ]# J+ P0 |
</div>* D+ j# q1 @: B8 r
<div>
4 n# e! K2 j# d' A <h2>{{changeTime}}</h2>! U% N; s% J4 Z
</div>
4 j7 c2 y( Q8 j </div>
4 v. L% ]+ T9 @& h& V) F2 U <script>
+ A1 b* O. ]6 F+ D new Vue(
" R# { E* e( l2 u9 O {
* e- t7 u o0 y4 b3 I el: root,
# o) i8 G( t) _8 W. ^ data: {
/ ?$ j! P" a5 W; ] firstName: '',
]3 ~3 r+ u* {. C& D d4 D$ Z/ r lastName: '',
% D" d' E+ R# r. K- A" g4 d changeTime: 00 i! U1 B3 v- T" {
},
1 n7 E, ^: c# B& z& V) y6 y1 [9 K methods: {/ ~9 {( h* Z( N' h( X
: l) ^/ i/ q$ w* |1 z
},; q5 t( a& t7 s5 U) u: ^
computed: {% T7 I c2 i3 J* ~( s m. ?
fullname: function () {5 j |2 ^' ~3 s) t% U
return this.firstName + ' ' + this.lastName;
R7 f4 Y0 W" ]4 h+ h }8 W% }1 l1 W% w. U9 ?0 M! K( O6 H
},. b" j! L: P5 U/ v9 o
waTCh: {
. m& s* r4 n1 q9 h fullname: function () {2 g: j6 j" E6 V7 p8 k! w
this.changeTime++;5 E/ a$ H+ u/ V8 }8 Q; j* Q
}* U% _8 j2 A9 v* b8 m% I
}
* _$ \& P' c5 o }
0 l( G2 I N; R) N6 Y: s$ P )
6 N" o0 `, _0 t" d' K& W </script>
& v- {( U0 R: J; C% c7 M</body>" ?4 i; |# t/ X$ i: `* z/ H# c* j& `' F
* ]7 J( I7 ?- N, F6 ~/ _</html>- b0 d; [9 F1 d4 O8 s a) Q
3 i# r# ]; p. i6 t, N2 P# I6 b
0 V0 T5 T& _3 F& x' Z" C7 T+ |0 Q1 J, K
|
|