|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
0 V/ C+ a$ a! K+ v. o% K
7 B" x5 \1 y0 L8 `2 p6 ~; f<!DOCTYPE html>
! _* [1 {! o( N; _$ Y2 F( O<html lang="en">/ c! w1 ^) q8 t# I9 v
8 R; N9 u, M) }% e& r; f
<head>
/ S# P1 T C) z& V5 C S* @5 h <meta charset="UTF-8">
( |7 z9 ]9 C6 v* d7 T <title>Event Bind</title>
y1 Z+ `; l( q, J5 z2 R9 D <script src="./vue.js"></script>0 ~7 K* m$ ^9 ~8 }
</head>/ k6 K) u0 ~+ f8 S( y+ y E7 ^( V, _
+ ^. v( |( } ^# X' B<body>( @% P2 `( |$ _* _+ q! H" \
<div id="root">% ~8 _0 ^1 d! w$ h
First Name: <input type="text" v-model="firstName" />1 W2 i) d& @2 D; e
Last Name: <input type="text" v-model="lastName" />9 n C+ u8 ?, |/ t
<div>( A4 |' l( d' Z$ L, }
Full Name : {{fullname}}
. z- Z4 M: m6 \5 S, m ~) U </div>; R) r: G" x3 P4 ^* O
<div>
2 x0 ]* l' P' e1 ?, \# | <h2>{{changeTime}}</h2>
& `; Y! l9 L4 u1 c, a1 B, q </div>% u7 a4 A' H+ g6 _ A- f
</div>
2 K6 Z: B# V* w7 U& n <script>
% l s9 d% }: w4 W6 y3 l" A( i new Vue(
0 l. |* A1 {7 h0 X# H3 x+ z {. d' e, P7 N7 w. y
el: root," @7 @6 @3 Z+ H" ?3 w
data: {* [ [7 f7 Q5 C/ ~1 @
firstName: '',, p: K1 x/ c" R' t4 F& R
lastName: '',
& b# g. d0 n J" A" U" [- t. ` changeTime: 0
. A; }" P; T7 u },# ]6 t& l; @" q2 Y1 ~9 m
methods: {% _) p5 N p: r4 ^8 B' V
+ Y6 i$ x9 {& R0 R/ C5 }
},& N5 t8 n: M# d7 {* Y7 v$ W
computed: {
9 k9 C! T4 j& ~# r& I2 Q' h& x fullname: function () {
t% T" P W5 H2 u @9 `+ \ return this.firstName + ' ' + this.lastName;) m, L4 s. O" Y9 \" V
}, Z N1 q( D. X- ^; ^& _
},, }5 ~5 z2 W( a9 }" ^2 Z' E( W; g, J
waTCh: {4 y1 ]0 X I$ I( s
fullname: function () {
- q1 u9 j1 l* N4 o( x* a: z+ B this.changeTime++;
/ f8 f3 N/ F# i }
# M) E7 t8 q$ x7 f& n2 i }4 f2 V- S# M% n( Z
}" O. q& P' D P3 d% b- Z7 h
)
, ~0 ~8 }" }# }+ H! _ </script>
; @) Q* E6 G% }) M6 P</body>
. i% E' p+ `! G# K' c! Q4 G) T2 X; D" ^ D6 Q9 `- s; J
</html>
6 [, \4 i* J( f/ Z0 Q; Z
) i6 i9 D4 q' S" ^( O3 W, q
' Y7 W: g$ j0 J$ Z7 S" y |
|