|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
* `$ G8 ]2 V M9 V" k4 I) E7 ~, @
1 }2 }( w4 h5 K( a0 w+ A1 {; x<!DOCTYPE html>
) Y" w) |* m) C8 x<html lang="en">9 v0 I' P% x! {% Y. d$ x. D) a/ F$ w
! B' ?" F6 H9 I4 k<head>7 ?) ?( O# z' C7 ]4 a
<meta charset="UTF-8">0 d+ Z* W' o& }
<title>Event Bind</title>
4 F7 D, q, U' {6 T <script src="./vue.js"></script>
) x2 I9 j/ k, X5 f/ J6 y6 j</head>4 C, k9 z1 p+ _1 f: H. F* `9 @& E
5 L$ J; g5 @. C0 z9 O& L1 Z
<body> ]& ?' X4 H& z2 E& x
<div id="root"># n1 L, M( A6 [6 q: a
First Name: <input type="text" v-model="firstName" />6 h: x2 b5 }4 N$ H" k6 M
Last Name: <input type="text" v-model="lastName" />
% l4 j1 e+ U; J# L9 s: Y <div>
: \4 D' f" S1 u Full Name : {{fullname}}
, O, a/ D: f2 ^9 j8 U5 L </div>
% m( O' m# {' y$ { <div>
1 B5 t' w3 b9 u4 V <h2>{{changeTime}}</h2>
' x6 k, T G0 O2 L1 H8 v* x </div>- Y; S' ]8 \5 e3 |' a0 a
</div>
: E; e5 p. `! z4 ` ]' B; z, O <script>
' }: M) C- g9 F' A0 B Z new Vue(7 c3 T" y+ x* W+ |- E
{. X& p6 q5 u0 q/ k- S3 e! Z
el: root,3 C; n/ ^* J" O( p! R7 J
data: {
2 Q5 k I6 r* I/ X, P firstName: '',7 v% ?% v7 W0 {, K- M% w
lastName: '',
1 M0 r+ ]; M8 @; q) C changeTime: 0 B, Z" [! [# l+ _5 R' r
},
. o% M- z1 D5 G6 S methods: {
3 |" c( X6 ~7 P5 X P, z/ j* B- h, l& U
},) w. y) G7 w3 h f. d' G4 D6 d
computed: {
. T5 `, J: D2 i3 ?. w- O4 M fullname: function () {% `4 c/ x9 [% |" h) A+ F
return this.firstName + ' ' + this.lastName;8 i$ e- g, e6 z2 R
}
! [" I9 G, g/ H- u/ ^ },$ Z4 N/ ?+ z8 e+ L
waTCh: {8 {3 W9 \/ I6 u- e: ^" d* w" [
fullname: function () {2 a; ?) x* y$ C
this.changeTime++;
- M) i7 Q7 J" J* s }# K! }2 G4 B. k$ D& P8 f- j
}: k0 K8 r* q% V/ Y$ Z
}
# `5 I0 G! r' t# {, A )8 A; R% x6 W. ?6 s) M& g3 o0 U
</script>9 `5 `" A# A& m8 t5 Q
</body>3 T' V, _7 R) c' V0 `
8 W1 Y$ R& M5 h</html>
* e" f" F( q( r) y z- D S+ S. S5 M* A+ i" \4 s) Q
# [( C, @) B& R; a
|
|