|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
& u' t2 j5 e( Y8 ]. f2 @. O2 h
# m7 R! S9 p& o<!DOCTYPE html>' I- J1 M0 y9 J7 u6 T; P
<html lang="en">& Q1 X5 V1 t3 Z* ~# Q$ {% l6 I3 D
. V8 y( _+ R$ m+ r: B
<head>0 ]$ a1 k9 a& j: I5 c* q# i
<meta charset="UTF-8">
/ X$ @3 t; \- N D <title>Event Bind</title>2 w9 u6 `2 v# x4 Q3 z
<script src="./vue.js"></script>
; P9 D- |* M3 d( L; T7 p/ {</head> g5 g5 q6 W# C* o( i: B- I
( z1 s. Z0 b3 o6 m( D, I; M<body>4 e$ G- h' R+ |! A5 ^
<div id="root">
# ?$ E* |7 b: c# m! a6 i, w# Z) e First Name: <input type="text" v-model="firstName" />
8 F& o# o2 h: ?3 \0 Z# j! S Last Name: <input type="text" v-model="lastName" />
, m( z4 F; g9 S9 y0 r2 i <div>+ H: n" s' k% y7 w3 E
Full Name : {{fullname}}/ X' M5 ]4 }- }+ j
</div>3 u6 o! Y" t. y6 ] U$ x& w5 f5 d; J. i% J
<div>) y# F4 X/ Y q9 q
<h2>{{changeTime}}</h2># q+ f3 R$ c! n2 ?, E/ c
</div>& ?9 T" x8 o$ U/ B2 N* b
</div>( @: ~! `6 W1 N) Y, e8 Y& I
<script>/ a6 @6 j1 ^: }5 v! d8 u- E
new Vue(: s8 D: t8 O( a+ \. \( L
{
' E, z' i; U7 y# A) v0 i4 o' g% O el: root,
5 e y+ w: J+ j data: {
% Q6 d8 g) z& Q! g firstName: '',
) R3 V _2 f3 r lastName: '',6 ^' j7 [1 M; V0 }, i: D# D5 ~2 V) z9 p
changeTime: 0
( ?5 u0 [- f$ B3 [% X# G! \$ p2 }! d },; i, N* p) v' [8 @. A$ ]
methods: {$ F) i. \5 w% x1 s- z
: J: |2 C4 j* W0 Y* O' [1 p1 ? },
6 h2 F7 Q' S) @+ A computed: {
# l8 Z- @* K: ]6 u4 _: O; u fullname: function () {: w( R1 m9 ~! H6 F/ M
return this.firstName + ' ' + this.lastName;4 I Q, ^ T) }; |$ H4 s3 h" W
}+ J1 s! y% R; @7 y0 A1 c3 X
},1 p, c( t9 d7 @: w- ^
waTCh: {' U* W* G! g( |+ \8 l% A# b
fullname: function () {( H; }2 ?5 X. }0 Y% U
this.changeTime++;3 w% g. t0 I \
}- a' h' ]! h0 n1 h9 [! \! I# J
}
* m7 Y6 T2 I( y1 @ }! b9 C* J' C. H
)/ w, j) S. r- V( }- C) j1 f
</script>
6 i e4 Z" o0 q/ D5 _0 r' f</body>
% m$ T4 d5 {, \8 n- z0 B
" e* Q0 P. l3 _3 z/ ^</html>
# a2 }4 m* F/ b! _( M9 `- Q' s1 V1 _" W; r- h* f5 K. H
9 n0 f2 t1 u! U$ S/ p |
|