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

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

  [复制链接]

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

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

admin 楼主

2019-8-7 18:10:37

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

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

x

2 T2 F' q7 `+ P1 }
5 E- [  X4 A: Q" Q4 Y
* w. o8 R  t7 ~  ?4 L% O: p) H' T; Y/ o) n* ~
<!DOCTYPE html>
( W  S$ {4 p9 O( l# q, z<html lang="en">
! K4 X' S. e' c! |% `4 S<head>. n5 u+ q- b4 E/ m/ n
    <meta charset="UTF-8">  S. _  M+ X# C0 x% a. q
    <title>to Do list</title>0 M/ L3 d1 w1 ^7 f
    <script src="./vue.js"></script>0 U& |' g9 X$ }/ m1 T! `9 s' Z
</head>1 V/ W+ c& w% @) ]3 K  h
<body>0 f0 r) I0 ], Z* u1 `* R" j
    <div id="root">6 @, o1 @( f, V
        <input type="text" v-model="inputVaule" />4 t& n! \: ]2 ?3 W
        <button @click="Submit">Submit</button>
2 F8 b1 j) T) B1 ~5 Q& U$ g6 i  ?& o        <ul>
7 B# k- |' m. T% p            <todo-item v-for="(item,index) in List"
8 V& }' @5 {! t- i( n3 c            :key="index" $ @/ u' @( K. m$ [9 H1 F
            :content="item"
1 ^& J( m& @% A2 A            :index="index"! y4 k% P' R/ x- h& z3 r7 R# ^
            @delete="handleDelete"
4 l# G/ w4 R: P' R. ?6 k( U: U            >2 G, z3 Q. E. ]4 A$ c, C1 C* A
            </todo-item>' O! i' {. O5 ^
        </ul>
$ Y% t. ~  p8 z0 {$ x' r    </div>
, s. E! @  w9 |- j' {0 J    <script>! g* |. H3 h9 I$ o' r+ ~6 x
        Vue.component('todo-item', {8 q7 X. \* l$ j! j- t
            props: ['content','index'],( H. E; S1 L% ]- @* c5 j9 H
            template: '<li @click="deleteRow">{{content}}</li>',
/ B' z4 R) y0 E% y) B  s! p            methods: {( [7 E; b7 p" i6 Q, U
                deleteRow:function(){
" p* [- ?* J8 t( l) z                   this.$emit('delete',this.index);6 J* i& w$ O+ d5 J# I  T2 T6 z
                }+ B) N# B, |6 ?! R6 W
            }6 T- K! M) |5 u/ n& R: y$ t
        })
! G; E. e/ X) G' b        new Vue({, K7 t+ i& [8 M; t& `$ J9 f8 }/ z
            el: '#root',
, |1 D# B1 ]% x5 |9 ]            data: {1 o: o7 A* F. ^0 `+ C
                inputVaule: '',6 u7 |( G! t* p0 F
                List: []" ~# P/ y2 i5 ]. y2 {$ a4 g& O. R4 e
            },
- w! f4 K" U  G4 M- C            methods: {7 D7 i. u5 H8 i, e, i. x
                Submit: function () {6 R+ G! r. A% k& _" C2 i
                    if (this.inputVaule != '') {
' x8 G0 f, r. c& s2 h. C                        this.List.push(this.inputVaule);( _# d/ {7 T, N# o
                    }1 J" ~) P' m/ }& U7 {7 w4 x1 S
                    this.inputVaule = '';
$ f! l0 y  p1 o. T                },
9 o! g) U3 a1 V* l3 Z                handleDelete: function(index) {$ i; v0 m1 A) q! _; b+ Q
                    this.List.splice(index,1);               ) F" D+ D- o1 V& x1 d9 U9 r  A
                }
" f* E( X+ R4 t" D$ g            }
, D% C8 ~! }( a  F3 z        })
; j: C. _& r/ I; A2 Z# s, a    </script>& w7 R* u+ M/ N
</body>
( R6 q& g5 Y; I( ?</html>/ Q' r3 W* [* @
( x  {5 B; S# Q$ o1 J: ^
4 P: [2 {- k' K2 S  O" c& a% 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嘛,还是其他的什么
/ E5 Z. j& X9 L% K' L3 J2 s另外咱们平台对代码性质的这些分享,能像一些其他的技术平台一样,把展示效果做的好一些不,这样增强可读性
上海点团信息科技有限公司,承接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:22
5 J5 N0 ^( i0 t% t* M( {; o& z最近楼主一直在分享vue的开发,这块的开发是针对TC的那个AWC嘛,还是其他的什么
% t$ k# C- f8 @2 h4 Y, W另外咱们平台对代码性质的 ...
. l) V; b5 J( L' Z  E
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二次开发专题模块培训报名开始啦

    我知道了