PLM之家PLMHome-工业软件与AI结合践行者

[前端框架] Vue js实例,简单的ToDoList 实现

  [复制链接]

2019-9-1 18:31:50 2241 2

admin 发表于 2019-8-7 18:10:37 |阅读模式

admin 楼主

2019-8-7 18:10:37

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

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

x
: m4 k( j; t$ n8 P# Y

) q- B9 u' \% Q0 X7 o% }* C* D, w& T* t, ?- k" j) r: N
/ _. T* Z. V" R; c- t- t
<!DOCTYPE html>3 R9 u- f  V, u6 B
<html lang="en">- {) ^7 H% b& Z. W0 w
<head>
& m* ?) k4 m; Q    <meta charset="UTF-8">
; o1 F+ \' G2 |/ ?9 m, G/ h    <title>to Do list</title>6 d) }8 ]1 T& k% `0 l+ A
    <script src="./vue.js"></script>
5 I$ }8 {( l- Q: [. @, `</head>
! p# J$ S9 r0 t* s( M7 O<body>) A( d) P% w7 I6 s: s: n+ X
    <div id="root">/ [3 n' h3 y, T8 C; x5 q
        <input type="text" v-model="inputVaule" />1 Y: v# h, O8 I: K& J% o. C
        <button @click="Submit">Submit</button>, N1 U' e4 \/ h2 S, Z, r
        <ul>
% O0 Y% z# n2 V% S/ Y, G            <todo-item v-for="(item,index) in List"   b+ n  `" b& r( @' Q
            :key="index" ( ]% r+ b& V* h
            :content="item"
. C' Y, S0 n7 T- }            :index="index"
, R* ^+ ~0 |) W! T8 L9 |            @delete="handleDelete"
0 [. {3 D( t+ i            >& I  F; i- |& b% M6 y) ^
            </todo-item>. c8 }( i" E$ d* i0 k* E
        </ul>1 ~) m5 ]# v5 \2 S2 }" x9 V
    </div>
5 ~, k0 g& R( w+ H: _3 k' i    <script>  Z6 p) T/ M8 G& ]) }
        Vue.component('todo-item', {
7 f$ o7 ]  q* q0 `# X            props: ['content','index'],# C1 Y  u' U+ o% H
            template: '<li @click="deleteRow">{{content}}</li>',* V; D3 {$ r3 ]8 Z  m
            methods: {  d! N7 t: U7 L  _" p8 I* V* P2 e
                deleteRow:function(){
$ h- z# Z) m. u' s                   this.$emit('delete',this.index);7 n* @* Z: {" C+ q+ g, e
                }- b. V8 N& n4 i
            }
  Q: O6 B+ q9 k% f        })/ ^2 `4 b1 H% g' Z: i* z
        new Vue({2 [: q' P7 m. ~' e  [* Y3 P
            el: '#root',
6 h' J; y' |7 i( b! f7 n' _" z            data: {
5 `4 u1 D+ n) Y% K2 W7 _( s7 ?                inputVaule: '',/ M8 d6 {0 P% v+ a
                List: []$ ?8 @- q8 s2 T( h% W. g: |, A$ I0 I
            },
  \0 v4 N( m" O% L' p0 K  z, j            methods: {0 E- r  a* K: b3 @! L7 r7 E( Z
                Submit: function () {
  P' t8 z# Y) \5 }4 E' Y                    if (this.inputVaule != '') {
# p& H! n+ `) x& F- N! c* @                        this.List.push(this.inputVaule);! H; Z( s% J" x! I  W$ r! T; [
                    }% D, J; t6 r1 V7 Y
                    this.inputVaule = '';% E* i, ^: T: k* C$ x) K
                },
$ Q. S" |$ X! M* @                handleDelete: function(index) {
# U9 i! ]3 \4 I0 W+ L8 g7 l                    this.List.splice(index,1);               
" r  Q5 ?! {9 R4 R, M1 t5 W* B/ v                }
) h, z6 H  ]% \3 x5 T2 c( O/ Y  j            }
. D3 l8 H; k1 d9 o" t; L        }): f' ~- Q" t7 Q2 Q5 E
    </script>
# X9 C+ O1 U0 w1 O. m2 e- d5 T</body>/ _) X. n9 d8 d6 _
</html>
. O& {6 P7 V; v6 C1 U. Q

; p- a6 s- `9 W7 ~# y, [& s
; P9 v8 @6 l3 \  U
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

全部回复2

Frank 发表于 2019-8-10 09:22:12

Frank 沙发

2019-8-10 09:22:12

最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么
4 D! m0 C+ \0 N% t4 V3 b7 ^另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

admin 发表于 2019-9-1 18:31:50

admin 板凳

2019-9-1 18:31:50

Frank 发表于 2019-8-10 09:224 e: f$ ^* X* J
最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么6 K( m6 R3 i9 C, h3 d5 {
另外咱们平台对代码性质的 ...
  h8 i: c. ]) a
web 开发前端框架,以后着重于互联网方面了
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了