查看: 2353|回复: 0

[前端框架] Vuejs 属性绑定和双向数据绑定

[复制链接]

6

主题

4

回帖

60

积分

管理员

积分
60
发表于 2019-8-6 16:08:30 | 显示全部楼层 |阅读模式

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

×

& |+ r7 B/ [- G  t( F6 W$ l! O8 e; H4 R* n
; E- Y/ d' P9 k% U
<!DOCTYPE html>7 V8 `* [6 O! E6 p. m
<html lang="en">! D% M6 d2 L" i% r+ C- a$ p/ N3 [' A( a
5 X* E) y9 _5 S# Z4 J
<head>
# t/ t4 s' c, |8 [. F" k    <meta charset="UTF-8">5 [7 v. c  \% S3 _9 l
    <title>Event Bind</title>. F/ R- ^1 G- B* T4 ]& e7 `  {$ D
    <script src="./vue.js"></script>
  ]+ K, X- i: o</head>8 w( w, ?( o$ X) `

2 s) S/ `/ C. W# P6 o2 S<body>
$ K9 {- l( p- G8 k- a% @% V    <div id="root">
. U1 ]) m3 |5 |' e        <div :title="title">Hello World</div>
& o) D8 h& j& J: P1 d3 K* Z3 W        <!-- v-bind: is the same as : -->4 `- ?; u* x4 y2 n. X" Z7 w1 x
        <!-- v-model -->
# r) J( w3 o, B) g0 Q/ \* j2 Z        <input type="text" v-model="content" />' v/ P% \% i3 Q" n2 }1 c
        <div>{{content}}</div>
/ B2 G9 C3 B! N' b" A9 C    </div>
; g! T% R9 ^3 O. {' [* D" T8 ?    <script>& x( Y, k4 T! A  V
        new Vue(! V* o) [. C) d4 S4 s
            {
9 K5 {$ |! l# G; V% x0 ]; u8 @                el: root,
. l; J0 Z2 e+ Z7 V6 v                data: {
! ?. ~7 G0 O% D+ f; s  w                    title: "this is hello world",
" m- Z0 _) P; v( t                    content: "this is content"$ X# r) x: E8 L: A4 \- F; e2 y
                },2 C+ z" m# g- b2 J1 M
                methods: {, c' t9 K4 d. \) v6 P3 v: T! D1 b

1 ]% I$ L- @) _, P. N8 u                }5 [  @  y" R. q
            }
. a1 i' D* H' O0 R        )
- C' {7 T3 [4 |, J+ K    </script>
0 f% {$ j- q( h; y</body>
# j/ L) q! N8 W% ]
* T. [. c2 e( E$ K' e</html>
  L6 b/ j! j+ g! ^
) L5 G0 I; A6 Q. J

* e5 @5 q6 {- ?( W; h* k' d" v
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.doteam.tech
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

在本版发帖
关注公众号
QQ客服返回顶部