|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 R; x# y- ?3 G7 A% L4 I9 X
& _1 |0 A$ E( D( _* P1 W# W<!DOCTYPE html>
) F' \" _7 p+ w4 z<html lang="en">0 F3 h* H4 h4 t' j/ j* u# T) h3 i
1 {+ @9 |: [% @9 O) o<head>
) U. q; n/ N1 v <meta charset="UTF-8">
" F4 |* L# f: P6 S" I% b: [ <title>Event Bind</title>7 k F" m/ `% a/ b
<script src="./vue.js"></script>. {7 X1 J$ v0 R4 X1 h( p
</head>& [! ~1 k: w' Z: X( ~, V
% F6 G% H2 p- k# E8 j1 D, X# V6 Q8 S
<body>
/ M% ?+ \' l1 J' y, Y4 t <div id="root">
# q& @+ A) y2 [) b7 o First Name: <input type="text" v-model="firstName" />, w3 P$ y& ~2 X' p. {
Last Name: <input type="text" v-model="lastName" />( O! j0 G, b, P/ ?: c7 m
<div>
U( W, P c* F; H Full Name : {{fullname}}
' v3 Q- h, s8 @) G8 v. j+ G </div>
2 H R; V. m) M% O% [ <div>, @+ H0 h3 T* A! r& |# O. }5 z: X0 s
<h2>{{changeTime}}</h2>2 T' Q, c. ~* R7 E+ J ]
</div>+ ]$ Z' S0 |5 e8 f* b
</div>
9 e6 Z, n* ~4 h; v <script>- s. k4 q2 T/ e3 L1 N. u: }! B) J
new Vue(" D* a1 ]' L/ Q9 g$ m4 W
{4 D9 h9 S! p: U1 x9 p* W* T
el: root,0 m6 v9 _) }) C6 P9 ~' h
data: {
! a2 Z4 ^$ V# s firstName: '',! J5 _7 M) [/ G7 v* D* V- F
lastName: '',& j( c( d4 A4 d1 m
changeTime: 07 K* |+ Y5 }, ?4 u/ i; c' y* L
},6 J/ e7 t" C$ J
methods: {
- r( J9 I: n- H, a, f( G: b" H0 v G9 ]
},, D5 f$ @2 u( f: A. ^7 C1 N
computed: {
) m) c3 d8 S2 P fullname: function () {
: ? U& a. ^0 v& B8 o return this.firstName + ' ' + this.lastName;( Y# K4 a# e! i, T$ n, ?# j' u( S
}
, L2 O+ D: h7 B4 f },
: ?- W+ _/ x$ @. D) | waTCh: {
* Q) {2 V, A% C4 W fullname: function () {
0 c2 U b( h* D$ f; ~ this.changeTime++;
. Q* U& [" F: V: }; x: A }
1 S! i( g5 R. M }
, O! _; Z0 s' l8 G- Y, L6 F }% v+ `$ e3 w5 S6 V/ W+ I
); t) R. s0 _" |0 P( E8 E2 V9 n
</script>' F, x0 w& g# q
</body>0 A, ]- _4 C' o5 C2 N# S* d
3 C1 X% |7 ~+ r( \</html>
9 B- r9 m& Q) S. n
) Q2 I+ W+ T# [) u
: D- p4 o- H" e. d" g |
|