|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
W" G0 Y4 j5 H/ {) D$ @
3 h' \" y7 K5 U% j& J8 |
<!DOCTYPE html>
! {7 |8 _! I4 d<html lang="en">. t" h! Z) h; n% h3 ~ C0 w# T1 [( v
1 I5 f$ k) i" f. Y' M<head>
0 Z; c9 ~# y1 [1 G8 J <meta charset="UTF-8">$ T* l$ n& {# u! b- D0 H: `
<title>Event Bind</title>
4 X/ i6 `/ h- p' S6 |- N0 ?) L! h <script src="./vue.js"></script>( S# H$ [; O" y( ?) }/ `. [
</head>
& l! e2 v+ Z7 X1 v- _; k: B+ F$ E& ^" O+ F% ]
<body>
/ M, k2 w2 Y: C6 D% o- q2 r <div id="root">
" D( F2 W# B- F6 R First Name: <input type="text" v-model="firstName" />
, R, G) Q) m! U+ i! `4 s, Q( K+ C" g Last Name: <input type="text" v-model="lastName" />$ S" U/ z' @' ?% K
<div>" s1 u2 z5 u: R! {' z' ?
Full Name : {{fullname}}8 [" v$ m! L& J# S+ j8 Z1 D
</div>
/ W/ W6 T% y- g Y- R1 K <div>' [; c3 q; [; x1 c4 y
<h2>{{changeTime}}</h2>
6 L9 j; y5 [6 f( @. F; O) y </div>
2 {! r2 S% f8 `7 c4 Z* P </div>
) _4 \3 w8 ^/ W& K <script>! ]# w/ p+ f2 H) F+ m
new Vue(5 }. O# _3 T F H8 ?! r6 S
{: i$ p; ~! C4 m. R1 K: q' K
el: root,5 c" L& b$ A: g5 V% S* v# w/ h
data: {* m u9 y$ u+ k9 @ d/ L
firstName: '',
5 d& [* p# t) [8 p0 ^ q+ O( x lastName: '',: _$ s" p. w/ ^8 @2 j( a
changeTime: 0
. Y8 C K s) Z% {- E* N3 ^ },$ E y+ e- f! X$ _, i' S
methods: {
9 a( T. o$ r3 A9 V- H f5 o, s" Q5 e7 ?+ A
},5 n" k$ J* v) n- Q
computed: {
* p6 a$ V* q5 i6 u& y# S0 C" W fullname: function () {2 T7 A4 @9 n9 w6 Y4 s
return this.firstName + ' ' + this.lastName;3 @8 ?& [; ]$ r/ _4 g
}4 a8 i2 q: W3 G6 q/ w, Q, k
},
V2 ]9 U x' D waTCh: {$ _& I6 [/ j& U) h; |6 A4 J3 `
fullname: function () {
: M- `4 N t/ `/ Q# Q3 _# c this.changeTime++;
% e! c( m; I6 E; \+ N }+ K* U* \5 _3 P g4 Z+ k4 |
}
' T$ U4 \" O; W, Z/ q, N% Z }) ?7 C( r k1 \( q
)
& @7 U4 X" S4 r- t3 m </script># z/ W( u. B' l! q
</body>' Z. S) F4 E3 T" W7 b6 V
L+ G' {6 p5 i( i
</html>
0 C2 K/ A; F# L' _8 F
/ `( }/ ?6 m, ^; p2 h
- E1 r9 ~1 B1 G5 i1 v |
|