|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) ~" o1 V% W" L, f1 z; s% {3 }6 K! X5 i: l4 N
<!DOCTYPE html>3 e' R; J$ y. h1 }
<html lang="en">$ `* E$ K5 w8 i. E
! a$ S5 G" n* b$ b7 a<head>' ]1 c, F, H: ]% t4 F
<meta charset="UTF-8">
0 B* t, h$ \% a4 y, ? <title>Event Bind</title>) ?9 S' `4 v& K* {
<script src="./vue.js"></script>
' J& a3 _4 v% W5 O, V) k</head>% Y* M9 ~8 {& i& Q3 I) y
4 ?& g8 ]- Y# f% a6 I% _& O% Z
<body>
/ z2 n3 \3 y7 P6 m- A+ F, x <div id="root">
0 d( ?/ l5 \5 n* Z7 u* U, `0 V First Name: <input type="text" v-model="firstName" />4 h y1 b8 g$ E) x; C, V2 j1 t! z
Last Name: <input type="text" v-model="lastName" />; M7 o/ h ~4 d- n0 [' J( ?, [% l% k
<div>7 P$ c0 X1 s4 p, R
Full Name : {{fullname}}
0 M+ a5 J& W9 V9 A; u* x: Z </div>. {& O5 w# K" M' G- ^( M+ O- N
<div>+ O% T2 l/ x8 A. ?& E3 S
<h2>{{changeTime}}</h2>
; H5 x7 [. j: E' X" ~ </div>( h3 W! s$ K4 R0 p9 F) [5 Q+ K
</div>
. B) \/ A8 s5 R# G# _4 |- T <script>
" r1 e7 z$ ~1 M. O9 }' d; e! J new Vue(
8 ]. J( E0 T( q" l4 k- T$ z! p6 w {0 X6 N8 a5 E2 r+ {
el: root,
! L, ?& c$ z6 t& E data: {
: v( y% o4 ~* U5 {* n' S firstName: '',
; s0 |0 \2 e& Q2 U& y5 g lastName: ''," V) ?" ~( ]- w' M3 B
changeTime: 0
: T# ~, \: |- ~* v- h; h9 @' b2 J },
3 Y, V# C+ s" _# v2 ~) d methods: {3 o+ @; w+ n! Y m7 }" P, r( X
4 y* ^0 n5 g; l7 |+ Y Z$ ~
},
0 P. h& p# |/ G8 @% I* a2 Q: G computed: {) o1 Y7 t" x: @# r- ~, F9 ]; |
fullname: function () { b1 T9 s# t z2 ^4 k
return this.firstName + ' ' + this.lastName;
4 q4 F K- o$ s" o }
& Q% R: [" f7 H# s9 q% s },
5 y0 |( n0 b( v5 L7 P) n V9 ?7 f( ? waTCh: {
2 _" _6 }% }/ [( b1 A fullname: function () {; i) j6 U$ t9 J6 h2 W7 A" d4 z
this.changeTime++;, |3 i6 E8 O! B
}
$ g1 |( M1 G" M0 s# z. h7 H }5 }& V4 U# H0 s" f" g2 q/ F
}
0 ~$ |+ p2 c# M0 B )
/ B( B4 U- V$ C5 |; c+ i* q </script>7 H7 D7 U& m5 U% M6 c3 M7 G1 I
</body>
w1 O K3 n9 t; V6 g% H# \* e$ z* G
</html>
; J- j; W. `9 S+ a( g: a4 X4 M: i8 W/ `; ?9 L% T: H9 Y
1 H. p' L6 j* N" k! U) G8 h |
|