|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
7 M% ~8 r3 s" v4 G# k7 `. |1 X' ~
$ g* T6 K5 }) v1 Z<!DOCTYPE html>
' g6 q' W0 k8 l1 b j Q) r! a" ~<html lang="en">1 s( `! {7 W, O C$ ?5 B
- |$ ~7 X: X+ m9 L
<head>1 V$ R- F( E. U# t# Q) J* s( P
<meta charset="UTF-8">
7 d% W1 r- f2 Z$ k, j8 S <title>Event Bind</title>
- e- F. v1 z3 G! I <script src="./vue.js"></script>$ Q1 H8 \3 Y' s
</head>
! a$ I* q! h z L
8 F0 _! w( `1 |6 E8 {<body>4 V+ A8 d F$ f# h# l
<div id="root">
0 e1 @% F: i0 g; M First Name: <input type="text" v-model="firstName" />6 g" W* t9 b2 {0 U$ h
Last Name: <input type="text" v-model="lastName" />
; L( V6 w: G; g. K$ Q <div>
8 c$ p g1 J" J+ ]- @ Full Name : {{fullname}}
5 B8 V+ m: ` }. ]& Q </div>4 L5 ?2 ^8 S3 A$ U; a0 s; t
<div>
7 b/ _; x# ^" T5 O8 q, s( q& Q1 ]8 F <h2>{{changeTime}}</h2>4 j* W8 \% \) _/ ?! J+ P9 p$ A0 j( y
</div>
6 ]8 Z- W7 s; A$ p7 R </div>! X6 `, m8 t( ~1 Q
<script>
7 F4 u# l" e; {) e new Vue(
& \: b7 ~- X, q {6 V! N9 w7 ]1 z" e! H8 \
el: root,4 x0 R8 k2 E9 H' n9 J, @7 ]7 h
data: {
5 N: \5 d9 Q1 X6 h4 `- p! e firstName: '',
- K7 ]' B4 [2 {1 W; Y( m lastName: '',1 d( N( m2 N% `8 W) L, _
changeTime: 0
+ K3 z, b" }% l6 x7 t },
& z% `8 s9 ]5 o& }$ d6 O- n methods: {& d" Q; t* h# @
6 |, |( ~7 ?5 F8 Z+ K
},3 Q; o* O+ v4 {( r0 [
computed: {
9 |' N+ \" o# i0 L fullname: function () {9 I- V4 H4 Z$ y0 S
return this.firstName + ' ' + this.lastName;
! h( R' u/ x |* d3 C) o( a3 S }/ |6 k2 K Z( M K0 T3 {. X
},0 Q! e0 c: G' u9 Y0 B/ w# @
waTCh: {% `+ ~8 w! A* a, d9 ^
fullname: function () {
* |* i- J& x, @, H this.changeTime++;; K2 q6 J$ K1 s
}. r$ _' L ~6 O0 E% |: n: g9 k
}9 {8 T ] G2 r9 _+ X% l
}1 P& F# b5 x' C2 C: W; T
)
/ d; M$ p, e& d! g& } </script>
/ U/ c2 S ?- K5 B1 B</body>. a: ], a/ s2 [* |1 [1 g) R
, X5 A5 k) R! ]3 y6 R
</html>$ t- _3 d% C/ W# O* @* G* \7 W3 Z+ b
# z, Y5 r; }# {
V1 x3 v; Y+ g7 C
|
|