|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
X$ F# I9 o% Y, I. W8 P
$ `2 q8 u$ Q7 a- h<!DOCTYPE html>
+ S3 l D/ D {<html lang="en">2 U8 W0 w* ~4 s, c* W
2 D$ X* I: F% `( N8 q" i<head>
- d& m9 _& j" G% b$ ?9 i <meta charset="UTF-8">/ @: N/ ]5 C& R+ N+ l1 C4 O3 B
<title>Event Bind</title># g) L/ Z3 ]1 S S# e, l
<script src="./vue.js"></script>2 r) l$ n& }; u& c
</head>
6 ?9 _7 i5 K% L- F/ P3 W$ D; X Y: X6 c: R* o: T
<body>+ d$ n; o6 K$ u" F1 ^
<div id="root">2 Z0 J( C2 q |2 m. s: z0 S3 f7 r
First Name: <input type="text" v-model="firstName" />. T" u) o, R/ L% g- i
Last Name: <input type="text" v-model="lastName" />, h0 ~& V6 V1 w! M& ~
<div>
% @" h9 [, h: D$ L/ U! u- J5 e Full Name : {{fullname}}
; W5 P) _4 ^' u% `7 l* f4 u; v' {7 g </div>
9 j' y) M, Q v9 K8 d. P. r <div>& j& R9 V6 k; m
<h2>{{changeTime}}</h2>
3 Q! A( B) B, j) v" W </div>
4 O* r* p! H% l t% ?, f </div>) H5 P+ P9 z3 `2 w# Q+ r, \
<script>; O) M+ z. n# N
new Vue() ^# n! Y6 s" \% w9 j+ o: v6 b& e
{: r' q; H! t3 G4 f
el: root,* @, ] b" a/ F9 k9 _' I0 \
data: {. F5 ?1 N7 ]5 W0 `) J: E) D
firstName: '',
# P* o" P4 r* M& _ lastName: '',
: R# {7 A4 M* M; h) [ changeTime: 0
" {8 r5 Y7 G; U" C% T' N: V }," z# r( b) n8 R f% s: j
methods: {
7 N- }: K) g, A3 q' Q2 o& l" R% D5 c; Z. T8 \+ \
},
! i% z9 R4 f- M- A4 e computed: {
8 o3 }4 K3 x2 g J fullname: function () {
' U4 l( e7 L3 G4 r e" |+ C0 H return this.firstName + ' ' + this.lastName;: U% _) {4 W- U! P/ P, r
}
3 U, W2 T6 N; f, U! m% u9 R0 v" Z },
' K( t" c8 F: b waTCh: {
5 c: \3 Q0 I7 a) @( i$ u fullname: function () {
4 P0 c% Q, T. h1 T9 J4 { this.changeTime++;
4 X4 j3 L _# _' i$ p t- g1 x+ v }
" `* {0 b1 Y+ `3 ~8 i }: V& D$ o ~+ n$ h& }
}$ u9 i8 [9 {) ~' R3 N
)
! N- u6 I$ B( q6 T( b8 s6 d9 }' J </script>
% R' w8 c& V4 e7 t9 g# d</body>
$ }5 J2 o1 D4 _5 ?3 i
2 O% h) m- P) d& F3 @/ q5 e6 ~</html>% S" B7 g+ E- N; E
~& f v; r. \5 R/ ]
+ p: t" Z* j3 \1 v1 k
|
|