|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 ?" U# q5 g1 z# E- J3 H, y( G9 A# C1 L+ ? l
<!DOCTYPE html>
6 u: I& F I/ n<html lang="en">
7 ^+ |4 q) K8 S( E
" B9 H& z5 d. O<head>
& e. M! Q4 t4 r( i r <meta charset="UTF-8">
! P8 X- j. @5 H4 @ <title>Event Bind</title>) P0 |: D1 H: Q- A3 _- R
<script src="./vue.js"></script>
5 \3 y+ f* A8 P$ S# E; [7 Z7 X</head>
, k$ W: ]( b- Y9 T
1 X4 [) a+ g9 ~0 X9 U' H<body>3 ^" x% ]3 m1 z% _! x% l: N
<div id="root">8 ^& R6 `3 z* ~
First Name: <input type="text" v-model="firstName" />
& U K# d$ E# a* n8 T/ s9 N Last Name: <input type="text" v-model="lastName" />
) J! r' i5 C# x! q <div>
6 e" J$ h$ \1 r Full Name : {{fullname}}+ [) J# k( \5 k) z, h ]5 O: T
</div>
3 S* g N" L0 e6 i+ ^( E& K; j7 ? <div>7 n! V' V+ W% G% [
<h2>{{changeTime}}</h2>6 x. I" p5 n4 o- n* e. P' Q8 J
</div>( }2 y4 D& J: ], H0 Z
</div>
' W- g" G4 y$ ~. k" h) g# g <script>8 j, _+ p: j: _. v3 A. O m7 ^
new Vue(
) I9 r$ h2 v' Y3 }% }! K) D {
0 q! s5 H7 h; y0 T el: root,, a% B# v9 T- f
data: {, g+ f5 o2 T/ q3 s8 l
firstName: '',
& d- u% O9 c. _, F2 v3 H, [ lastName: '', n h! F' O5 O
changeTime: 02 K+ q; K5 |+ g) E3 G, J
},+ O4 Y. J$ s/ k v/ [2 B2 k
methods: {3 Q( d/ p9 J1 L) R2 e& H9 T
! `7 q( C" `% O# \+ n },
. {# N q' l0 y; P- q" L- y6 [ computed: {8 [2 X p# H3 w. u$ ~: c' m( A3 j$ N
fullname: function () {0 R# z3 N e3 x) T" ?1 O- d
return this.firstName + ' ' + this.lastName;
* ]) S) x8 I' T* G7 d }
9 P/ c8 _& l' J; C) u% C0 s4 a3 m },
- v, C3 |( M) L2 A1 { waTCh: {* v1 D4 G2 `" M/ Z$ D
fullname: function () {
/ f/ }( E B0 F& D( ~; a* } this.changeTime++;1 \, T8 B6 h* ?: r* @+ h9 y$ W6 ^
}
4 c. m# e( t [% \3 t9 t }
]+ q, u) q( e& \8 p* e- K1 X4 x; i }2 ^0 u* X+ M- O" E
)* x+ {/ [% @) ^# |( l
</script>
" {7 w: b; @0 f, a: K% i/ |% r* g2 G</body>! m! G3 s' |. ~, O% ~
! _$ {: _4 J' \/ m</html>8 y+ |$ R$ q5 t$ n( M4 i
( O$ U) G( y! M# d+ Y! N( `' a7 Z( Y* ^ o5 `2 ~% Y& y8 b
|
|