|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, } ^( q% y0 Z4 I1 }. i. J
4 D. z) O) s2 z% T. B5 C7 {<!DOCTYPE html>
, \# M4 U/ w/ z; \<html lang="en">+ k9 p+ |% F4 l7 m8 e! n% y
. d! `* i6 @' r2 \0 ^8 }3 l4 I& p<head>4 ^$ O' G7 H W5 Y( L
<meta charset="UTF-8">
2 g" {( Z, I" A1 m8 Z, @ <title>Event Bind</title>
# x+ c( U; q1 k1 s6 ]. S <script src="./vue.js"></script>" e7 h4 f/ u( b' a0 n- X% u. Z4 m
</head>
5 s! e x1 Y6 p6 C
6 N# z. H- `' j2 z w/ N L<body>
0 n, R3 ]) U, N: v, M8 S5 a6 c <div id="root">1 a" }8 |# ^' }2 L+ N( C6 @
First Name: <input type="text" v-model="firstName" />8 p3 A J9 ?+ ]( z' ^! e
Last Name: <input type="text" v-model="lastName" />" [0 c( q6 z$ |4 n
<div>4 S0 j/ U! ]/ e% C+ J5 n
Full Name : {{fullname}}
# m+ F2 ~# L- m+ r. `% X9 } </div>
% s5 [. Y- m( _+ m. C <div>; D& `) R- B, Y$ ?- D% |9 x
<h2>{{changeTime}}</h2>& Z2 c' z) q4 o* f
</div>: [) s) i) @) }" T/ J5 w0 b: _
</div>
5 U: N6 M$ _0 e8 F2 q/ O% R# s <script>1 K' g* p q Z+ m% w( }! m
new Vue($ B; J2 U. G+ N e' r( c0 M. V
{
# v& h- v9 y2 e; Q1 M% C el: root,
! t; O% A n3 {: Q% C data: {
' A0 x( g& R6 l* W firstName: '',
/ o2 q( Z$ m; ^: }5 M- ^ lastName: '',
5 A, [0 H5 N# i8 [+ G& ~ changeTime: 0
6 f( ~' _' E5 B: F* w* t' L/ B },& b0 O; d8 a! u
methods: {' X$ Y; n2 ^* T- |% U8 f
% d& {8 a2 ?* D' K- v. \/ S. ~( J+ Y1 u },, I7 O& H: P$ K( {6 |% B
computed: {
: G" a: O; @9 F! } fullname: function () {: y9 i9 c: g3 x
return this.firstName + ' ' + this.lastName;( q3 ?/ f+ X8 h4 p8 I9 T
}% S( }3 a& [; Y3 x1 q/ X. N$ z0 [( O% r
},1 x( W' w( R- a! `) r; y; q6 }4 r
waTCh: {( e! P0 V& ^! d) p2 `" q0 Q0 z; V
fullname: function () {0 x+ Y8 H0 D* C8 ?8 J
this.changeTime++;
2 ?& @0 g' o# c0 r }
5 I+ Q: y; t; M: l0 D' T }4 Y2 e1 {4 H. f2 G4 v7 c' v
}
# G# M5 c! \4 w) q )- v' `+ f8 S3 t0 _& _
</script>
5 b) ?$ u( s$ X</body>
, {) f4 o' y. o
: q0 d" E2 ]7 Z" {</html>
" i& \6 F9 |! y9 Z: X* }: i
( D# S! [0 w; |) s2 A
: i! T: F8 V, d+ _# c/ d E0 n E |
|