|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) o5 I9 |8 q! {* e' ~. `' X
# m1 t' \% A v) r. p<!DOCTYPE html>
- {& J3 N E& ?( H1 D3 K<html lang="en">1 o; S( i9 s8 x. q) ^( M. c
r6 J, d% d @; F( r, X( B5 f
<head>
2 i0 j% c$ h. [% V <meta charset="UTF-8"># k8 @! Z8 W$ N7 z7 W" c; Y) b
<title>Event Bind</title>9 c& W6 z: d& h* I! |
<script src="./vue.js"></script>! v3 I4 a; o5 m' l* D+ F
</head>6 b# @& Q. n6 B' @& b
5 T6 B6 W2 \( c" U' {<body>
0 i7 e8 b2 k) w: I <div id="root">
* X3 a# s1 \% E& S0 T' `' P7 _, w; C First Name: <input type="text" v-model="firstName" /># Z# ~* I3 d2 h5 s2 f
Last Name: <input type="text" v-model="lastName" />" J. G0 x5 F* U
<div>( X3 m5 ?, D e: e; T, f( O
Full Name : {{fullname}}) V' k7 v- v4 m( _
</div>+ Z4 _. Q" T* W8 V& T' t( e7 V$ @
<div>7 J+ ~7 h |" L) v% b
<h2>{{changeTime}}</h2>) t' ?5 D& `& M* J7 K" V. C
</div>
- ^3 |/ s/ b3 N }1 p* ] </div>
% w6 I( j: K9 n/ w3 W <script>
! C/ w: q$ L$ {9 G8 f2 \% [1 J2 \ new Vue(9 ]$ f3 y% _" B) {% Z5 i6 M
{
9 u1 G* R1 w2 i' X2 C5 R( p2 j g el: root,4 C; h3 c7 Y k k
data: {+ i- d" L6 R) {1 [
firstName: '',3 A! Q2 _4 } W# |# f
lastName: '',7 \& ?9 L! g+ r9 }8 j
changeTime: 0! {4 a' |" d7 o! E
},% T' D2 E4 o3 Y2 M6 r* Z* z+ ` @
methods: {
) {& O" C: K4 ^6 E$ |, S1 Y) W5 R$ p4 I) I1 N* {7 l% F2 s
},, M" O! ?& d0 t8 p! w: L6 \
computed: {
; i9 T. i, l4 c; p' \( }9 B6 g fullname: function () {
) U9 l; B# ^4 O6 [( E return this.firstName + ' ' + this.lastName;
' q- h. y* @. k3 a' b }4 S1 E9 |1 C. I6 K5 E9 F
},
5 W+ [* Y$ c( x1 n7 F3 I waTCh: {# K g( Z. {6 J; Z4 v) E% A% V
fullname: function () {5 ]5 x9 o: g+ f0 s1 V
this.changeTime++;6 Y M4 |2 k8 y% \
}
4 Q9 M6 e3 p0 b5 p% V; w2 z% } }
6 `) O8 m8 K* D }# G1 D+ a; d) E' n
)
% d* ~5 `/ {/ V7 u# s </script>
0 Q, i, \7 n+ S! _9 \</body>; z6 d! Z' s1 i- }. {5 G
" I& ~$ s2 S! d8 w2 X5 P' r! F& {3 `
</html>
% W5 r W6 L O
4 U9 B X$ H$ A( B( f8 |
8 V$ A1 L! o3 H9 K$ X( Z8 s |
|