|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" @$ z) \1 P+ _* G
' R8 l7 i9 S, H) L! U5 R6 @<!DOCTYPE html>5 u; p- [; {- {* o6 S1 z6 i
<html lang="en">
) H7 W3 q' _$ q: ^0 y! w u* X/ o% ]6 z5 b4 l
<head>
' L2 v; Z2 o3 Q8 H <meta charset="UTF-8">
5 [5 I8 @* i2 e, ^1 @$ W; X& r5 w <title>Event Bind</title>2 ~: I2 e( ?3 F/ d( K# z8 C- N
<script src="./vue.js"></script>, y) E( @, n" o. A: O1 C9 q
</head>, M2 b$ n: t3 J; q
0 N3 g* u6 t* |8 A+ A" M" q3 C
<body>2 H1 n2 D5 u' C4 k
<div id="root"># w! l( j4 a4 m- E9 d
First Name: <input type="text" v-model="firstName" />
: c9 w/ }0 |4 a# X' x0 E( R7 `/ h Last Name: <input type="text" v-model="lastName" />
5 w9 ]& \: ?3 b: c8 V) f4 C! b <div>2 z( G" V0 D- Y: _
Full Name : {{fullname}}% Z! i) d% ~3 b: R7 u
</div>. j9 n) n# a! V, P1 r9 S, ^" n& B
<div> i9 }9 E+ b d+ n1 L* z
<h2>{{changeTime}}</h2>3 A+ D' a3 U7 ~) b9 N' s9 [
</div>
* ^0 x$ D b; i% A </div>. k8 S$ W' y) q0 N6 ?* z
<script>
* z# a2 N$ S( w new Vue(
; H$ ~( B7 ?* I {2 j) B5 C3 J+ ?/ [( e7 L5 s: j
el: root,. Q% j: b% x' v& ^+ e/ K# d
data: {
9 E% \+ a% a: ~% T$ _( c firstName: '',
' G8 r; o; e' A6 m, B lastName: ''," J; p4 ~( M9 c3 Q7 X- `
changeTime: 0. ]/ z: D' G* k* j3 h; Y; l7 |
},2 G( A' w/ m7 y+ K( c7 A) I
methods: {0 Q. J9 R& i. U* E7 d A
6 ]% r5 G; F& t1 l- ]$ r" H
}," z& [' p1 F' t. g, u
computed: {
4 e* I9 Y5 d4 ]% d/ g O' T7 r fullname: function () {
( E! `- w7 p4 S0 I return this.firstName + ' ' + this.lastName;
6 j) E* i) J4 s1 ?/ x; q6 n7 s }
& m) e" H" F( \: t4 s* | q" ^ },
. q0 e# H! J7 `6 ^( G0 v& l waTCh: {
. n* a$ w) V, H. b fullname: function () {
+ M% j( D" A! H! a7 a this.changeTime++;6 n5 [3 u1 Z! ^: S o
}
' i6 G2 P4 ?9 b! t; w8 |. g }6 A) w6 j; c" d+ g5 @- ]( G( p
}
& A' J( ]- H4 o }) b9 g5 k ): ?$ R+ F9 B7 R6 Q
</script>
! [# [* W" d( y- M$ x E</body>% X( h* r$ h+ T! [( k( `
4 m x) T6 l0 x: K7 j</html>( x3 W1 }4 }5 U$ r! f! ^
! p& y5 S. m7 l) h1 o5 W
`' r8 [! L" h$ K' l6 u7 j& f |
|