|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
0 n/ v3 F o: X2 `/ g& Q& ]6 p
9 o. @" _& K2 B/ R<!DOCTYPE html>; H$ W' P0 o; b2 U
<html lang="en">
; {$ ~; `5 x4 [2 }8 u. b
8 g: `7 H3 m( L5 ]/ u" H<head>
3 i/ B2 L a* o7 } <meta charset="UTF-8">
+ O+ r1 J$ c- w& h <title>Event Bind</title>
5 {8 K( A, w* c/ V <script src="./vue.js"></script>7 Y/ p. B9 {, i j8 W8 }* h6 N
</head>
+ W& B4 J0 g" t! I" x+ N) j% {3 u9 }. A5 ]/ ?
<body>
' a; `# I! q7 |/ B3 {4 i3 Q <div id="root">: Q: |0 V% K& ]$ ]* Y; _9 @
First Name: <input type="text" v-model="firstName" />
) O/ V: s( I$ D) E Last Name: <input type="text" v-model="lastName" />
/ L! V7 P& q5 B% Z" f <div>
* G' G9 a2 {' h: M( U/ h9 [( A Full Name : {{fullname}}/ N9 B& Q; f3 E) f
</div>5 z3 S( L9 H, g% G2 D
<div>
0 d9 J5 ]. s4 o, {- T <h2>{{changeTime}}</h2>$ E/ y- E3 C) a0 Z( p$ r
</div>
7 J/ S, X, h* ^$ M1 S2 e6 u </div>
9 @! t8 W$ G) j+ L) G( o; S <script>
\/ Z; A# V+ ^# P5 d7 { new Vue(# j, P6 h' E% n# ~
{ O: f, U; z- K+ l- k" B B
el: root,
" f; [! X7 o7 K, ~ R! [ data: {# y7 g3 H' B2 [/ y
firstName: '',
/ u0 r& ?" f. v lastName: '',
& {6 B8 Q, ^) c4 ` changeTime: 0! w" _; q1 b" e& f9 a3 L8 t- F8 f {
},0 {* B2 q8 n# [6 d- O+ t6 V
methods: {
) Y6 E$ i. t' L6 ]; V1 a) Z5 J1 N9 C
},
" R+ o% }4 d1 i5 x computed: {
+ z3 B- c5 C& Q1 h7 V! R# P fullname: function () {
2 [3 N+ Q& g4 r1 @8 X return this.firstName + ' ' + this.lastName;3 C* B8 y/ D# A/ Q: u) ]- Y
}/ ]1 l/ @' M8 K5 N) j. Q
},& z T; c* A3 v$ z4 I5 ^3 V9 Q
waTCh: {) y) a7 k' y9 `
fullname: function () {6 `0 P4 `8 Y3 M% G1 n6 O
this.changeTime++;
! i" ]/ _. H* e }- Z/ I$ Z# S$ V. w
}+ A+ B7 }7 u V7 r
}
1 h7 [) c9 W8 j1 q )
/ K/ c4 Z. _+ d% B3 _; a1 W </script>
7 Z6 i# H9 o6 w+ D</body>
# J$ K8 D/ M [$ N/ u$ r. M+ Z& k' ^. F( U( o$ ]
</html>* m) @! b1 ]8 d3 V
% [% }6 y' x, O+ Y/ V+ ]
9 L* H$ g; { `
|
|