|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 U1 U* T6 r. o- v# k# o+ X# Y/ A, g! [1 X @: G
<!DOCTYPE html>' o3 ?4 {- p6 l# s) W$ W
<html lang="en">
3 V1 J# m8 e& N: C; U" W# `: T9 ~ }5 u. |0 R: @( @
<head>
+ F8 I* O8 t# u# S <meta charset="UTF-8">
|# I. F* b) @ <title>Event Bind</title>) G- w1 M) T' O a) h
<script src="./vue.js"></script>. ]& T. B. p' ]- c2 x" m" [
</head>
1 l+ d7 y9 U7 @$ k3 H) y9 z4 M- _9 s) f" e
<body>
# ~8 q; m2 }5 {# U$ I& B, W <div id="root">/ s% r9 \3 R, Y) K7 q" L9 g/ S
First Name: <input type="text" v-model="firstName" />
" n0 f- y( N3 o1 Q7 S& B7 @$ E% {$ g Last Name: <input type="text" v-model="lastName" />! d+ g) q, [% _1 z6 q1 q4 k
<div>
. K& {0 F9 |' W2 c; Z Full Name : {{fullname}}* Z: W6 L$ M% s3 o% {
</div>
- S! j. I* w3 i% r <div>7 k! E- i9 y* T+ d9 a' @5 F
<h2>{{changeTime}}</h2>) |) ^0 a" {# C3 q- b
</div>' a3 e! D5 X+ t' o
</div>: a' _6 F" D- O. \7 A0 H$ O+ |
<script>7 z+ q0 Y @" s2 r
new Vue(
- N2 Q! s4 q/ i# M# G3 k5 H {
/ h! W1 e; i/ E el: root,
/ I, j, G& s/ [6 B( } data: {
0 d1 L3 e) j3 M1 N: `6 |5 E7 Z4 x firstName: '',
# f8 M! D' N( ]7 G lastName: '', c ^6 |4 l# F- `+ I( _
changeTime: 0" N4 n$ X2 o3 N2 I; A$ M
},9 O9 j5 r* P2 l1 e) h% q
methods: {, I2 q7 K2 k# x; b! \
4 u8 E& V1 [ V1 A2 ?
},+ d# Y# u7 C1 n0 r$ x, [! T# ]
computed: {
3 k0 g Z5 ~) P( p0 Q fullname: function () {
: b& j. H8 U6 x6 \ return this.firstName + ' ' + this.lastName;
; w) P& _8 @, s7 _$ P9 s }
9 C' l5 D( }7 ~% s2 m7 z7 ^0 d },# P& T9 w% N/ h' U0 M% @% [
waTCh: {8 x8 Q2 N6 u7 Z5 ?5 q
fullname: function () {
# j8 m/ `$ j4 f* g! ~. B this.changeTime++;
/ r- y( m- e+ G/ p9 \ }
& e, m4 {. K5 {# O0 K }% |5 ^) A- ^4 K) }7 e
}
! ^1 i2 k9 ~1 c6 `5 r ); c7 ^" C/ _" Y( i& @9 x) ~
</script># z9 H- J1 I8 a3 A# c8 [
</body>; d# b F6 G, `8 ?: [. o$ e
3 f2 ]: i8 o" Q/ C" Z7 B' ~</html>
% i# K, n( a, d( v# e7 E
/ [) x4 t$ k7 o: K c
6 Z: ^/ x: ]# i8 r( Y |
|