|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 z, B/ Y: ?1 |# |
+ X9 m8 ?* a. b
<!DOCTYPE html>
8 _( J" n+ h8 |# I<html lang="en">/ v; b; S7 U/ p8 J6 `- l' H
' r ]$ G$ P& d) n* G' [2 }<head>: R* M! D# i I2 {, O
<meta charset="UTF-8">
# L* k9 l- W. N$ P+ L <title>Event Bind</title>
7 K! J% W/ M: b <script src="./vue.js"></script>
9 u* t' T' b. C9 u0 R2 W</head>
( x. W3 H: s( \
) Y6 {1 H, p- j8 ^$ t9 `<body>5 m4 k+ B5 r: p j. Z
<div id="root">! v u) Y* B C
First Name: <input type="text" v-model="firstName" />* ?# M. m' ?8 O* ^) U9 d
Last Name: <input type="text" v-model="lastName" />
# e4 [7 l0 ~# q, D5 Z <div>9 L1 ^2 @4 f3 x3 ^$ e% M
Full Name : {{fullname}}
, q7 l/ m& E$ F/ s, ]; a </div>, s) o6 e/ d r2 B; a# ?9 V
<div>3 E* Z4 g& ~9 Q7 H1 H
<h2>{{changeTime}}</h2>
$ \" Y0 E8 i1 O( J" w6 k </div>
5 ]" j. i2 V( ^. ]# c </div>
3 [6 c& [- l7 g <script>( F0 @: r( x, X+ g& s
new Vue($ S5 f7 t) O7 Q/ s0 q
{
$ J& ?! N5 A/ {+ c+ r5 F el: root,. x, U/ C- X( G( k
data: {
. p( Y2 j* X/ o4 T% L firstName: '',; g& i; X" X$ ^: x' D; R
lastName: '',
1 {' P& r& P$ J. Y! a7 c changeTime: 0( g% D L; h i `0 D
},
$ G# c, c$ m9 P% t2 n! U" s- E. x methods: {5 p% K0 v- \. t3 z4 q# N
" Y4 C7 P0 y' s5 t+ Z" T7 L },
$ N, g# e5 t8 [ }' l( Y computed: {
' I4 {8 `* Q1 W fullname: function () {
N8 w. X3 T+ ?( P5 T1 g return this.firstName + ' ' + this.lastName;1 J' ^3 r& p0 W; {" \" } Y
}
- S$ G" {# f; \6 v, K8 s+ w( x },- V; v7 O" [7 o7 \: |
waTCh: {. i# v; j* U1 H' D# V# e, g
fullname: function () { m& \7 N3 k8 a
this.changeTime++;
6 ?1 m+ a- G! h' d }3 w3 l8 x5 @8 \# g. e
}
: u+ a; [) [2 }* S7 w/ M* [ }
1 T* Y$ D5 h. d0 s8 g! ] ), j$ k& g ]6 {; p2 Z) }$ Z+ Z5 w
</script>
9 c- N7 a1 W5 o1 L: x</body>
: {1 ]$ B1 I' y: i
% [0 ]- ^% g; J5 k6 p9 N</html>
9 E- W3 [" f8 J
4 m9 X. a" K/ s2 L8 X! @: B6 r( O: X- w( V
|
|