|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
6 M4 N9 K7 D( Q8 X3 |
3 R9 _1 d7 L1 c/ T" R! H<!DOCTYPE html>
. |& M6 `. N/ t2 L8 d<html lang="en">
2 H, b! |1 \& f0 Z
) f! q m+ M! u; r$ r" A* W<head>4 ?; V2 N" ?7 C
<meta charset="UTF-8">
! T* ~. N/ q+ b" {1 ]! G; V) Q8 V <title>Event Bind</title>
$ ?% ^; ^- P, x# d <script src="./vue.js"></script>8 l" I) D- ? b: L( {
</head>. A3 G7 s& x1 D" G
# Y8 T! d% g' j6 I" D
<body>& v6 y3 M! [6 r) ]
<div id="root">" A+ l. \. O1 }2 m3 C
First Name: <input type="text" v-model="firstName" />% K; e7 Z- T9 c1 g
Last Name: <input type="text" v-model="lastName" /># r/ z% }7 E. ^" D, }
<div>) o. v9 `: w' `$ ]* ~7 E
Full Name : {{fullname}}
$ n. s( \4 x3 C1 t3 e" } </div>; L3 s' h9 S' X# I
<div>
# a# Y% Y- n# S! ~5 _$ K <h2>{{changeTime}}</h2>) q2 ~% ^! H, K8 E: Z
</div>+ a' [. j7 Z; r; f/ d e6 J
</div>
( j* p5 o$ X* q2 {' l: @3 |1 n <script>6 \$ p* f2 {0 `0 n! q; o9 j) `. [ v
new Vue(
1 }8 `0 L5 b' j" E {* q/ n. `' l! B; N9 J+ ]
el: root,
# Z# e1 z! Z Q$ E2 O0 E data: {- p6 `" B- j9 \& D4 L+ R; ?- l7 H
firstName: '',
Z' r9 s0 w$ H% H# t" B lastName: '',# K" h5 Z$ v* Y e+ [6 y; a& l
changeTime: 0* C3 J) ]* A8 P
},$ x: y/ |! i+ y2 k" Y' u4 O c% g
methods: {3 c0 i U8 R- J/ }
+ w+ D" I$ i Z0 E I },6 l; P& |5 A5 ?* r" W* l. N$ V
computed: {. z3 A! u7 s, d8 X$ |+ _
fullname: function () {
% I* V5 h( m8 }- V! H4 S return this.firstName + ' ' + this.lastName;
9 h+ V% t1 B: Z }; ~# ^( A" V; w5 [; c2 C
},
5 D9 O! z# j6 e waTCh: {* {. K% w1 i# @
fullname: function () {
M/ A+ [% M) H: G6 n this.changeTime++;
% w) ]1 A: X( X) P" S% d8 ^8 x5 S }- a- E$ e3 \7 K2 O5 J& W; q
}! K+ _; `2 C' E' b
}9 x7 R4 A' V* Q7 l% O9 w
)
5 Q3 `9 S0 X1 J, V! j </script>
6 W7 R$ N' q; F9 \, A9 B3 z1 j</body>
6 c5 W3 |. G1 ^- M0 N9 t7 N: `, z
</html>
9 [! ]/ G" ]/ v0 N5 F. `7 q- t7 P' z# v1 E+ G
- Q. O9 S4 n% T9 ~ |
|