PLM之家PLMHome-国产软件践行者

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

[复制链接]

2019-8-6 16:08:30 2106 0

admin 发表于 2019-8-6 16:08:30 |阅读模式

admin 楼主

2019-8-6 16:08:30

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

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

x

  {6 Q, [) p4 D3 g1 j5 V% M9 ]  M' u
3 ]6 N* w1 E# a' D
<!DOCTYPE html>
8 I) m0 f0 [, L# H$ O. f<html lang="en">9 c7 e% Q; x9 C* t) S+ l
6 u% S0 M: e3 s6 F; q- ?% b0 c0 y
<head>
! {5 I4 \, f6 \! t8 M8 f    <meta charset="UTF-8">
- a7 ^" F9 k) ~+ }! \/ _% ?    <title>Event Bind</title>! i. A+ |0 C# G4 N. {1 U' c5 b2 H
    <script src="./vue.js"></script>
; w  o* Q) ~/ F  W# z1 v7 p( s</head>" {5 \8 c, E" W  X$ y* m

' Z; a! A8 F+ W5 [9 T3 j: w5 B5 G<body>* [! ]" e9 x+ l
    <div id="root">1 v* Z$ d( s% w+ [0 |' h3 u+ y
        <div :title="title">Hello World</div>
! b( }6 A! F! {& ]3 f        <!-- v-bind: is the same as : -->: u2 x6 U8 j' Y0 O9 l* F% X* m
        <!-- v-model -->
5 ^2 f4 c( W9 w% v$ p0 `        <input type="text" v-model="content" />
/ ]% u/ ~# X9 H* o; g! x' E* U( a        <div>{{content}}</div>+ n+ ~4 N/ g5 s) n% b( ^
    </div>0 |' s( R; n0 x8 x% F1 I; v
    <script>
. |0 P' y$ {2 g/ L+ u5 O/ u        new Vue(
' `! j! r' x$ Y6 k8 f3 L" Z            {
- K  r6 A) c8 y# j- O8 l* j/ U                el: root,3 q% t- \3 {5 `' ~
                data: {
" e5 ?3 c- ]. I9 J$ e# g                    title: "this is hello world",
( m1 u7 j7 I* I2 U0 L9 o; m1 M! E                    content: "this is content"
$ n) p6 E$ u% Z/ b7 K                },9 J* j2 V2 u7 e
                methods: {3 C, \$ W) m- A) ]+ s! f
) a: H2 ]+ F. j1 I
                }
) z+ ^( B" Z3 E  x0 o0 Q/ l3 s            }
( r* {$ X' c7 C! d2 q        )8 f0 ?5 m6 A! e! y# [  x% c# v
    </script>% K: K" u) Y! q
</body>
, f) m8 u6 o( D: }9 ~; B4 z
; G) Y7 T9 V' a7 y</html>
# e- I# U) V3 z4 ?
4 B2 i( {' g" a& v

. d. }. n% G3 @
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了