|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, T# [. v& q9 q* q$ W& ~; O+ j! c9 q
<!DOCTYPE html>5 L4 D% r- ]5 Q
<html lang="en">* T1 t1 v( X2 Y9 J/ H
4 E4 w2 K0 h0 g% X
<head>
0 A: C6 g! e- Z8 O. O <meta charset="UTF-8">
* O% A& ]2 |- u$ _) \& ^ <title>Event Bind</title>* D Q7 Z3 r, J l$ \
<script src="./vue.js"></script> v/ h! i/ B1 j# z) D
</head>
/ i7 I% u& ~; `6 X, }& A3 M- s4 m+ k7 i
<body>
" B3 L/ n, b" K& q' v' ? <div id="root">; P& ~. W- H/ t5 d
First Name: <input type="text" v-model="firstName" />( D4 J$ n+ p0 A/ Z6 C7 d
Last Name: <input type="text" v-model="lastName" />
& [" \& X3 b- \, L- V* X <div>; \3 \5 x: @4 c
Full Name : {{fullname}}
! |( ~0 m" {4 r _ O' X2 @: d </div>+ |+ s3 R2 z- l/ e# `6 A+ H* Y1 z
<div>
5 @: Q/ t. X3 [6 N$ x <h2>{{changeTime}}</h2>
+ ?8 L8 S/ H4 p/ [ </div>3 s& o) R; b4 f. I) {- H, M+ b% J
</div>
5 i! U. T2 k/ [ <script>/ @, n2 [( E6 c
new Vue() o6 c1 H; `& P0 d& |8 k7 I/ L
{
9 |; |$ A1 {, w5 { el: root,
+ p) c3 n$ c3 j data: {
J2 h0 p6 A, a% K2 d firstName: '',
/ x& e7 ]6 a" X4 G1 b1 Y' f lastName: '',
, @7 a" }% S& l8 J5 _ o changeTime: 0
1 t. N2 j5 f5 H. S8 P3 w },
$ x: ?+ K9 a: N7 P methods: {4 L8 n+ J G1 m' @
6 T: ?6 q. X3 [6 \! W9 ~( A3 ] },
- W, G$ u6 t8 _ G/ e! R% _1 \ computed: {
/ q* j2 {8 a% u( K/ B fullname: function () {2 m. Q; |3 b$ b) k9 u
return this.firstName + ' ' + this.lastName;. W4 e! y' @/ g8 l% A+ S: H
}
# T! a% G$ E N },0 n( Q4 j Z! Z
waTCh: {
@0 Z0 M5 J3 ~# h. t fullname: function () {
: C. P& D$ l$ y2 U this.changeTime++;
4 V/ z- ]* |' T% D7 t$ _: ~7 E0 o; n }3 g$ o( E, Z9 {9 Z; L" P
}! U5 L5 N4 z& Y
}
; n7 K& M1 `9 C1 [/ R& x" Z* X )% j/ [$ P' u" p* t5 F4 T
</script>; ]2 X! f# P; I+ S7 w
</body>5 N9 w" C* V8 k2 o3 P
: |% a. F7 W5 \+ Q( p$ L7 M
</html>& u8 p1 E- l* s; h( x2 m
; C! `9 M5 i* w2 Z0 m- O" ?
( X3 e9 m2 F D7 m3 R0 W m) q* m$ A/ K |
|