|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- P8 f$ O. S( W5 Z' @) R
; `8 S8 E6 c+ `4 l+ E<!DOCTYPE html>8 X/ \* C- n" e6 m. C
<html lang="en">
g+ p( d% f. _4 e# S" l/ F6 T4 O% J& V) u& l" k" u
<head> |3 S* ^, _6 g0 ?, X l/ z
<meta charset="UTF-8">& u, x& g0 i) s) S5 ?; |, Z
<title>Event Bind</title>' c: Z6 [& G$ V2 w* q& d; }
<script src="./vue.js"></script>
5 x+ B$ d; P* A- e</head>: U7 m0 W! P/ _
/ F7 t/ N0 M6 f& J% v
<body>
+ l1 l2 V1 p# B <div id="root"># r% C) _) E* Z2 O- V3 M! E4 [
First Name: <input type="text" v-model="firstName" />! ?( ?7 D" q c+ M( u7 Q
Last Name: <input type="text" v-model="lastName" />8 ]) H( m" x+ d& p3 L
<div>
0 z1 g( y& Y b0 m$ S9 k2 C! `4 U/ t Full Name : {{fullname}}7 {' E# o& t: n3 l
</div>
" h; P( c( a; r C1 P, W/ @ <div>
& a" b3 z. Y# M8 f( V- s <h2>{{changeTime}}</h2>+ o4 A$ T D; B9 H
</div>4 q/ j) P1 K* E9 F
</div>
5 E y4 j m- P0 N: X) j# L <script>
8 x( d; H" `, g new Vue($ U& {3 z: n0 V( Y q- G8 h8 `
{
+ r8 D4 N+ ~+ g/ f el: root,
2 J4 p( a( R# c4 | R data: {
1 u1 `8 _! h6 ^: q% r firstName: '',
6 {# |, }' n/ T5 Y$ Z lastName: '',
# L/ P% D0 P q& l changeTime: 0
: R d8 J% e0 W9 l4 T! ^8 N },; b. l, N1 l1 T& O
methods: {6 B" U7 [( U9 B% d$ L) ?4 v
; d/ ]) G! ^3 ^
},0 m5 _2 n0 E$ t# M3 J9 ~6 B, M
computed: {) w$ t& d0 T, v0 i
fullname: function () {# R: U: K W9 b) d7 R
return this.firstName + ' ' + this.lastName;
. F$ l2 r/ V. p3 O9 I( @( k- Q, ` }& H$ M+ g. E5 z ]! B$ E! Y
},# `, S+ a% w6 x$ a+ K% D
waTCh: {' K' b4 i+ j6 O1 a7 S
fullname: function () {
- w! S9 Y4 U1 V. X5 a# n* x$ l% @ this.changeTime++;
1 o0 C8 U+ V# f" w: R- s9 H }: U. b( }- B6 E% v4 U2 G) X
}3 U- C2 `2 {; q# E
}; q8 @- o3 S: K% z6 m
)
4 A8 [9 F9 ~2 C </script>
& ?! s, _' F# f: P</body>
% {3 m( x) f6 C1 C" ^; E( ?/ f6 u4 C' }4 u4 b! N$ ^2 |( X
</html>( B8 x. F: r; r+ X9 p7 i& N7 j
9 u: m7 m7 V/ Z1 x* L) J* n( {# ^0 \0 B; Q9 Q$ w- k+ t
|
|