|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ n0 @4 [* g: R% G" q( P4 ~0 i7 w; g# u" l+ `5 I
<!DOCTYPE html>3 b1 T8 C! J7 t I9 x
<html lang="en">- ]) A, h9 m! U& F1 }
% O. I" s1 W- d# f<head>% t& W" i Y# `4 Z( V$ g B5 I
<meta charset="UTF-8">' p" k' _' u5 A4 r
<title>Event Bind</title>: ~3 y& m8 O2 i6 V5 y2 \4 f
<script src="./vue.js"></script>+ d" i X7 Y$ d
</head>/ v1 E1 k" O7 b, f3 `0 {
, |; J2 t! Y! R5 b& [- m0 K: G: R
<body>
3 W; P0 Y. F7 b, e/ F <div id="root">
, G' ]; Q' ?2 j% u3 M! A. ~5 O# I First Name: <input type="text" v-model="firstName" />
1 x, l4 d% T# q" ~& D- R, l6 } Last Name: <input type="text" v-model="lastName" />
% Z) p' T& n% u <div>) d6 U' P( M' d& N+ b- y1 @" k5 m
Full Name : {{fullname}}
3 a2 p# I/ o. _7 o/ \& z/ u </div>. j. W0 r+ ~+ P- N( U3 _* s/ s% n
<div>
5 n2 t" S V3 p8 O& m <h2>{{changeTime}}</h2>
( B# M/ a& \: z </div>
3 q' R; Y2 I$ n Z$ {- y9 D </div>3 S6 b% [8 {) I! K: J
<script>, C( C& Z9 `2 W4 }: _* H; E n- M* Z
new Vue(
( V5 i1 _; ]+ R5 _$ i5 | {
# p' u8 ^3 M# P el: root,0 s5 s" _3 W" n% I5 P: a5 z: ?7 C
data: {
& i9 G- N# |# B5 E1 m firstName: '',
4 Q" S) [; \8 V& u8 B- T. ^" D lastName: '',
" s' G. _; U5 v$ n7 s changeTime: 0
/ R+ y$ [. N* l) a- c$ h },* `. d8 c% c+ @8 u( t- d' J7 P
methods: {2 z( I8 V: U8 Z) z- w$ {% c# o
" f4 E+ }4 z r4 l( r3 K# n },
- G. M4 n9 _7 o- K, ~% C4 ? computed: {
* ?6 Y1 Q3 S% B# W* ^# Q' e" ^ fullname: function () {* G7 h# H: }* o) a5 O
return this.firstName + ' ' + this.lastName;
% y8 i( l& I+ p' E6 r h5 m0 c }
( P* O; @& R9 ~ },9 C( ?+ }6 a7 O( R/ T6 i; P4 d
waTCh: {
4 R0 P. b9 W4 O. U1 Q fullname: function () {' o: H# n( b8 J& S+ c" ]2 k0 z
this.changeTime++;
# O1 W7 N7 {# C$ L7 `& N }
5 J" M k! H [& t }
1 b! L' w- D3 H6 B( k" C4 q- V }
1 P! W; ?! H- c3 Q$ |0 F )
1 S+ M! E, g3 M) E4 O/ m! p </script>
! M9 ?0 i5 }0 w4 q, \: [</body>
) ? L; t w# t* U6 {) K
7 S( k9 k0 Y8 k5 x6 M; \</html>0 V& j/ H7 ?1 A5 @: D8 B2 m+ `
, n n6 I- \6 j5 O3 P' T- }
0 p) K8 n: J8 u" q9 i3 G |
|