|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 |1 ?# ?7 P8 H V% Y1 L& i( j$ J/ K. X1 J3 J5 e6 p% X, n
<!DOCTYPE html>. o% C; a* [% ^
<html lang="en">' e- }. h4 ^5 N6 e& Z
' D% o; g: |: U/ P; @
<head>
0 G9 K4 l; ?4 e; S2 _ <meta charset="UTF-8">
" I4 T1 G& ~/ {' J/ P3 b# ` <title>Event Bind</title>
) Z! c1 P8 ] x7 j <script src="./vue.js"></script>1 N a0 K! G. `5 A! @; |5 w8 F+ p6 x8 E
</head>
& E/ x. J/ u! J* ?- d+ \, W" q" x6 f% t% w+ {
<body>
) c& l7 K" R, i! [ <div id="root">
% D2 V# h" [3 Y( R0 T First Name: <input type="text" v-model="firstName" />0 m. {" I h$ ~0 X& N9 v4 C) `& e
Last Name: <input type="text" v-model="lastName" />, ]7 B2 V4 U) T2 v
<div>1 H% [( i: l8 o: U7 W
Full Name : {{fullname}}3 Z; q5 w8 z' @; x+ {4 u) l
</div>/ G6 s' I; a0 i0 o
<div>
5 E( i: { F% ^, l9 G$ x) X$ M <h2>{{changeTime}}</h2>3 O1 G" ~. ?0 v
</div>7 x) I0 S5 O# E4 i, n5 r
</div>: U9 c. {1 U* d1 ]. g
<script>- D5 c2 p4 b- ]6 f- t6 F
new Vue(
; i* U# N8 u! W# ?" X0 Q) |$ L {0 Z0 C5 C+ d" d4 U$ V* c) b2 F
el: root,/ b; i+ T& q8 C2 ]: i% R# l, i8 h+ `
data: {
" f& ]) s. H% x firstName: '',
" H2 `2 X. D! i9 B lastName: '',
! m: m! t7 |9 J) o9 f changeTime: 0
5 l' e! Z5 C9 Q8 k0 \! Z },
: X$ t: z7 |+ q methods: { \ t* W2 k8 z
/ G0 ` c$ m# b, t# H+ X, R; O4 R },
1 a2 q$ D9 ]2 M% h computed: {
6 {# o+ [7 N3 k+ A2 X. J fullname: function () {$ M. _' Y$ k( U1 c' `4 X
return this.firstName + ' ' + this.lastName;6 g* O4 h- a: p
}% m) `8 Q% L. M% W, c( b( N# ]6 y
},
4 l5 {* H3 P( F2 o6 y2 j waTCh: {& I) F8 S7 i/ r. D8 Q
fullname: function () {4 Y6 n$ T# F# n5 A% S; [3 S7 l6 D2 I
this.changeTime++;+ s$ j8 q# @" G* u% A N
}
' j" X+ g0 V. W }1 X/ o8 d" \( v
}9 s/ Z; b2 \* Z; |( N
)
& E' i; ]( Y; V# }6 m# Y8 T& T( n1 { </script>& t- C7 e& Z+ [+ q: s; l8 T Z
</body>5 b# k5 E8 K5 x+ I3 |( |4 A/ }
( I9 p" q. b: F" T* {- D
</html>
" ]. b3 }* O! y5 s7 \# G" p& f8 I# M, u( b
( D& }, @8 E& y0 F/ X" R W$ G
|
|