|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: a7 h3 ^- ]; l% {/ S% {, w
4 y6 W/ i: T- s# V {<!DOCTYPE html>; p- p7 z' F3 T% _+ i* w6 E
<html lang="en">+ h! s( _2 T$ l/ K9 g$ S
' ^: b M& U- j# o+ t
<head>- N5 F( n! R) \" x
<meta charset="UTF-8">
; A! v1 j+ N! o0 k/ s# Y4 q <title>Event Bind</title>/ B- M# q N! T1 V h1 [8 ]
<script src="./vue.js"></script>
' Y3 d; Y$ g/ {2 V: G$ u- d</head>5 t, C) x. m8 k, V% P; e
6 u, W% n- w/ i, M# M<body>
2 N4 ]$ H& {7 ]2 B <div id="root">
: A) v4 O9 ]. [3 \8 H- N' k4 C First Name: <input type="text" v-model="firstName" />7 q2 n6 \/ B9 L6 [, x" m# g
Last Name: <input type="text" v-model="lastName" />! ^- X0 E8 A0 ~0 M( v
<div>
! X! _. I5 a4 d( O" C9 b Full Name : {{fullname}}
; O% \' e% n4 D+ T, h+ ~2 t! Q </div>+ |% p q8 U( W
<div>+ H, G' K f+ u. I
<h2>{{changeTime}}</h2>/ O: M' Y4 I! v$ W7 {
</div>9 N- D" I! N: c5 P, ^9 V) V+ t" o
</div>
7 t5 q. U5 z0 b <script>7 _' R. g- r* \: A: h
new Vue(
0 }$ P8 W( @3 [$ u8 L {
D4 w; \' R" l5 l) Y el: root,
/ g; w4 @7 R3 i4 [7 i2 ^9 c( E data: {
$ f/ e. E& z, U n% z+ k8 j firstName: '',
5 I5 H, X+ L9 L: b" {: L9 w+ N lastName: '',1 A8 B6 o1 V5 K
changeTime: 0
, R6 n, ~( f+ @( I. q1 X },$ l5 N" e% z) E' A' D0 F4 v
methods: {
8 s- z. ?5 Q! }$ l: w8 J) }1 D( ]4 Q
},
, q% P; D3 c4 ]8 \ computed: {3 s; B6 k! M- D
fullname: function () {) P/ R! @. ^+ J: |
return this.firstName + ' ' + this.lastName;
& u- C& `9 f4 [# V5 U2 W }1 D4 B, E* w$ J1 V. F; e9 ?
},( s+ C+ W! }* v8 P3 n
waTCh: {( f: x! x6 R) X/ |
fullname: function () {
; ]; X0 y- F( V: u this.changeTime++;
4 i/ v ~& \8 s3 W" ` }3 G: Q; c( O4 N& G- N: h" @8 L, f* S: o
}
+ q& g8 K, Q8 W% B7 t- b; s7 ~ }
$ Z# f$ g- @+ L% a7 F5 | )
9 p3 [8 m" k# w </script># v, K1 u" Y7 F7 A J
</body>
2 Z* l* _3 ^2 C5 S* p! h M ~7 e( z' Z
</html>
) `$ s# |; P8 g/ u$ q( g* R/ K6 O8 x; N/ H- b
$ W3 V/ a2 T2 |0 F' \# j! p! N
|
|