|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
* f! |, }% e# ~5 T
9 C" P& O$ V- K2 u% R<!DOCTYPE html>& x2 P# B3 y3 T0 F0 \2 K0 R4 }
<html lang="en">4 R3 D: @! g& \; ^2 Q
3 ~. `7 n. ~- U1 m- L
<head>
$ }0 W- r; a. F <meta charset="UTF-8">: S1 i% v, `5 }9 }2 r+ @
<title>Event Bind</title>
& ]+ Y. {4 V% n2 i0 E <script src="./vue.js"></script>
9 d7 I* H4 q$ K2 H3 X/ N- \( _1 r</head>
3 R P, i7 t+ t; h- w
7 t( h! m, k) v: X<body>9 A. f+ A+ p4 V& m: P
<div id="root">
9 P1 [1 m- T( i; ^- H4 ~* D4 L4 w First Name: <input type="text" v-model="firstName" />1 g+ ?5 U2 Y+ V A/ @) e
Last Name: <input type="text" v-model="lastName" />- N) \- @' a6 x+ }- I6 z `
<div>
9 ?- o( q$ E; H Full Name : {{fullname}}0 m6 V; h/ G4 k8 N
</div>" T/ r1 s) N E* B( |, b! \2 V
<div>) J# g, C0 o% t& b% j. l- v+ V1 N
<h2>{{changeTime}}</h2>
8 n$ H$ Z# K4 b" G9 P: e2 c$ ]- l </div>% H# Q4 B# i( }. A* b% o
</div>, Z# |! Z- o/ x/ | C
<script>
( A& I) |; h' s' f: ^( R new Vue(4 z) Q, V! i' R) T
{
/ L8 ?: I. D% b4 T$ S' t el: root,
( c3 i2 I6 \8 \ data: {. z9 U9 f) u1 K% j# g, j
firstName: ''," f* m' q! R! `) H( n; R4 t
lastName: '',
7 ^1 ]) X5 {" ?6 S changeTime: 0; j- G$ @) M2 |
},9 R2 I; G4 ]; u, q2 ~' ^- V' k, c
methods: {. o7 i' l. q) z! K& G) l& q% @" D$ s- H
/ E B6 B: E- U" i/ z* W+ z4 j5 J
},
: T5 N1 {( Y3 O computed: {. s# g) @8 F w+ @$ ^$ b- ^8 @
fullname: function () {
9 C3 N) `) R) ], M9 d8 k' v( v return this.firstName + ' ' + this.lastName;
' s$ h! F; e- @9 s# s }& n- _5 [# y, ^( S3 @# N) D; x
},
$ X2 S5 \$ t& t/ Q. B waTCh: {
/ E8 y" Y# v( H fullname: function () {% b3 }+ i* R+ K( v" V
this.changeTime++;
+ f$ j% V, _5 H; ~9 J; v2 } }
+ E5 m8 V D$ q( f7 O! F/ m }5 I: h( ^$ Y) v( p- `
}% j: ^" ~3 ^' {2 H9 A
)
7 e' ?$ }+ {- i5 W </script> x0 V1 @, M! l$ x; k2 K
</body>
% g; _7 y! B. m3 e/ n/ \; U+ t9 ^9 M1 _9 U- C
</html>8 G$ f6 G9 l, \$ U) U
# r% t! a7 g# p1 z/ ^8 h4 H, ?
K& j6 U! B. A. o) ^; Q. d/ |$ S
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
