|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
* B: l' Z8 A5 J( Z0 a
- l8 f, i. \8 z/ b7 H6 n<!DOCTYPE html>
! A8 z1 ^* ?+ B/ U4 L+ p# W% K. C<html lang="en">7 f8 h2 R6 Z- v. I
. ~5 y" O0 c' @1 f" L<head>4 f& A9 W4 |4 s5 y. q
<meta charset="UTF-8">" A, o* A& s2 Y# e( c7 X
<title>Event Bind</title>* J* L3 y e' Z* z, c/ b- l
<script src="./vue.js"></script>
9 {9 S6 E J/ X1 I5 q7 {5 U U) Y</head>
! K$ U! p- u+ e* P% x6 s4 [5 e7 H3 z/ T' V" i# g
<body>
# ~ p$ e: J/ x& R5 j3 K <div id="root">3 U% i8 {7 i, j! k
First Name: <input type="text" v-model="firstName" />7 n* N9 t U- f- W7 b
Last Name: <input type="text" v-model="lastName" />7 R; k2 i7 E0 p. a9 {2 ^, H+ e
<div>
+ V6 S1 M; U( w5 D Full Name : {{fullname}}
7 k* j: A O% k! A6 o </div>; l$ \8 T! o8 |
<div>" G2 s# e; f! r. a( o1 y
<h2>{{changeTime}}</h2>! P/ f3 b( v: V# Q/ q+ A
</div>
) s2 d* E% P$ H </div>0 y& q1 y& }2 _% u7 f4 l+ h# z( ?
<script>
' ?$ U, E' _& t* v+ [& |6 ~9 A" u5 S4 [ new Vue(* Z& g ^" `, g: X* U1 w
{
. S2 g) ~1 T6 T. u& Y3 E el: root,+ H, U; w( |1 \, [3 j" E
data: {5 D6 F1 H# w) z" o: F$ E5 \
firstName: '',8 |% e2 S/ `. @4 y9 L
lastName: '',
4 l) B# ?. y- {$ ^ changeTime: 0
- c- ^( A5 s$ ^; ^3 G },
8 G; d4 c7 I' u. R2 \9 A methods: {: d2 \: B9 I' i% @" H5 A1 [
) E4 Q$ R0 B7 W# l. q },
9 x7 ?0 x) O: K8 h: Q" U6 r computed: {& q: Y2 P. y, M/ [
fullname: function () {: j' }# c ]. E2 K6 d
return this.firstName + ' ' + this.lastName;
; S# u& D. p* g$ q; I1 C }
, K8 n( @* p1 `$ l" j- w },! ~9 f1 |/ F+ Y T% p) f
waTCh: { S4 l9 J3 E0 E9 q
fullname: function () {2 A1 @# W5 r# B4 y" l9 _
this.changeTime++;: w+ T' X1 Q4 }+ L6 w5 Y: w
}
& f0 Z4 a- S+ E. q. r4 s& t; P- ?% J' ~ }, j d; u# h' s
}
6 S% g! ^3 n A P9 [8 ] )
/ f: i S$ o; @+ Q$ u6 F* ^8 }, {9 a/ S% u </script>
. a" ?$ X3 ]$ F( _3 H3 b9 I</body>3 L! d& |# f% g( R
' [8 j2 v, N" |</html>7 p# \( G9 o7 K: I h- [: n! K6 B
# S2 L. K( ?* z' {( Q, f6 t' ^
1 h& ~% j' {. n& R3 U/ j0 Q- E0 w |
|