|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 f6 j5 }& A O o
8 ?. M: n9 m9 X: I<!DOCTYPE html>
: \/ `+ r9 `' t' O7 ]$ Y4 |<html lang="en"># f: f# x7 `0 j' C5 ]3 K1 w% \
3 a) s i& ] v0 F1 r4 B1 T
<head>
8 h q# z6 P8 _ <meta charset="UTF-8">
t6 [# `' r3 b4 l0 B2 C: W1 h% J <title>Event Bind</title>
; U; d" R$ C4 v+ _ <script src="./vue.js"></script>% m9 R2 N) i& @0 v9 C
</head>
- M' Z& w. N* p3 i4 e; N! [( X$ N [! \2 e) h% x4 ], @3 l
<body>
3 j7 L( v6 L5 D* L* A! F7 v$ Y2 \( p <div id="root">
% [3 G# M8 j) ?, J) u1 o9 V First Name: <input type="text" v-model="firstName" />$ M- k6 u& j+ R! O2 S: R
Last Name: <input type="text" v-model="lastName" />
( z5 R7 N9 H2 I# O( {/ w u <div>9 _, I, @/ H* [6 {/ f3 k5 @
Full Name : {{fullname}}+ Z) Z+ y. t0 o. Y$ Y! F% Y
</div>
; @4 p& n* P0 I+ @" D0 ]- b <div>
/ x9 k. C; o$ K# \. ~ <h2>{{changeTime}}</h2>
. z8 J$ T& _; f </div>
9 [# _2 K8 [) t( b0 X) p </div>
. w/ u1 k$ F* l3 h <script>0 p% Z# U, J: v$ Q8 {+ I
new Vue(0 c( M: Q2 l& v, F& D) y3 i, s: k$ C+ T
{
, g. h9 x* n; S% F+ | el: root,
3 R; J. O* p2 l* e: Y) Z9 ] data: {
% a$ i- |9 L+ L. P# f6 k firstName: '',, Q* C9 F' t* m W* n6 N5 |
lastName: '',7 m$ _+ n6 ]" `0 N1 f) _
changeTime: 0. u9 f2 O4 }$ |+ f5 E
},8 K9 P# n) }& B; X4 }1 M
methods: {/ b& @9 m7 h Z% g3 j2 B R
S- H& Q+ \+ j! N. l4 B& w& W },
; |/ d% [! G3 } computed: {! o* M% ?3 r* k0 V. g# N
fullname: function () {3 K6 {% g3 v" Q" k) z
return this.firstName + ' ' + this.lastName;
8 i) D8 K: Y2 L }
# R" N: E6 p% e# H2 @: u8 v },
3 ^/ b( D4 M- g: h# N3 {# }2 i& U waTCh: {
# [8 o: i9 _* B fullname: function () {- ^% v) X k- A" c
this.changeTime++;6 w" \+ K; ^+ \
}
. B1 y' ^4 v" M; N }' @7 x4 K# ~0 n
}+ W( Q9 q4 u0 l9 C
)
* I) x6 n" ^) i" v' h6 ?2 q( K </script>& o& ?& ~- H7 W( D! @- T$ B3 c, d
</body>
8 ~# \) G V" U; T8 g& b/ c: ~ Y. a8 J
</html>
8 Q2 u3 A0 s! c7 m5 B5 ^4 [! S P1 [
; @. q7 h2 Y# m- I- V( W! W7 g) o _: a1 r5 E
|
|