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

[前端框架] 组件方式开发todolist

[复制链接]

2019-8-8 17:24:11 1966 0

admin 发表于 2019-8-8 17:24:11 |阅读模式

admin 楼主

2019-8-8 17:24:11

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

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

x

. v( q  }) S& Q2 x- b
! [/ B2 X1 L% T* r6 N: B# C0 L! a+ A7 G7 D" N6 ]. |
; N" }$ _9 W0 u- t
<template>2 i: F6 H5 ?$ e8 C" {: e
  <div id="App">3 B, m. x2 n  ~' j) k( I. N
    <input v-model="inputValue" />
2 I' _& v7 n1 \/ D9 c) R9 w    <button @click="submit">Submit</button>
' G7 t! b4 c+ ~  S: w. k# S    <ul>
* |  f( p9 a- c7 Y& T; q1 r      <todoItem! U; g8 s" s* n3 R; X. ]
        v-for="(item,index) in List"
% W4 e9 @- f' `, c$ z        :key="index"* B# q1 r2 a7 Q' h! P5 B0 @: N
        :content="item"
$ H" H4 M2 q+ _  n7 W  L0 u        :index="index"
( |/ D% |9 J$ ?1 F% Y9 \        @delete="handleDelete"9 M4 D2 a. w. v% w" |& O
      ></todoItem>9 i. R' S8 G$ s& V' s( M
    </ul>
( c- D( j# q/ k" e2 ^' f1 ]  </div>" f, @( O& ~2 k. n: J$ s
</template>
) w: d6 v+ N: o, j7 E# Z* E. a4 q0 `/ j& y
<script>
1 Q4 }( y) A( C# p, J" ^8 wimport todoItem from "@/components/item.vue";+ i* M1 ~+ X0 b  U/ }' D+ Y

0 ]. i8 z9 y" }5 v& Y# z: m8 xexport default {- q  h; K! {: Q! r
  data: function() {& }$ i/ _8 W3 n. K
    return {; l4 p) f! ~/ w
      List: [],* V1 h+ G# P* |) c* x
      inputValue: ""
3 V# S$ w/ R% S# @$ G7 F    };
- Z1 u" L( P! g& `  },) D/ ?  h' [3 W/ @
  components: {
0 O& G# G1 Z# H1 q  g+ e    todoItem
( l$ m" y" K5 w  },
$ q5 ^8 k' p3 ]. M, H  methods: {
: ~' U- s  c) |+ O    submit: function() {
7 ?1 w" w' \, M, y      if (this.inputValue != "") {
7 i" K0 O& Y' n        this.List.push(this.inputValue);
2 s# a5 h' E; O0 S- t4 p" Q/ z      }& X- Q5 [. ]3 S  U% W9 O
      this.inputValue = "";
7 `; a5 Y/ `6 f8 A3 b. ]$ e    },! F; {& r/ r5 F2 B; z8 j
    handleDelete: function(index) {) Q" V2 t$ k. ^+ T* `; X6 s. v  x
      this.List.splice(index, 1);
) {( t$ T! a: ]6 c/ b    }
# y5 C; f( j* f. j# N6 l  }( d3 e7 H3 g% E6 k) _+ K6 i
};3 }" J/ h- p) g! u9 o$ i1 p, E0 V2 |
</script>
: v8 F# |* S7 B2 ]
6 P$ k  g- r8 R& J+ `' M2 x
6 G8 `- ^! f' s
, I$ f7 @- \. o* E' H$ f# k

% Q; k. w/ o$ S- X# b: }: h: \9 d& e' y% H; _
  u- @  O9 a- n1 {% h3 n

4 O9 y" N# O1 `9 y4 ]<template>$ |5 {; k# b9 G  K, O" H6 v
  <li @click="deleteItem">{{content}}</li>2 I. p7 _9 q' l1 |& h* @5 s
</template>
$ P2 f8 Z' C2 u- @' _+ Y& |" D6 j& q0 g
<script>
2 v, A6 w) T+ o% }3 s1 Aexport default {- e! H: U$ B6 ^3 S3 h2 Q: b
  props: ["content", "index"],
' F5 S- |6 y! K1 R2 }  data: function() {' T2 i) W6 V- }1 y; v4 P
    return {};7 H7 @# r7 R  Q& O
  },% F+ l+ {- e1 }6 Q- U+ r
  methods: {: N2 D% P+ p; f  b% t
    deleteItem: function() {
7 C8 j8 G( v3 m7 N! U      this.$emit("delete", this.index);
! Y+ C0 D! Y9 ]  E! E; U6 p    }
- L; _8 z, H1 J4 A  }
9 ^) Q: U! \; @+ S/ @8 \' Z$ ^};" ~" z7 |( F$ L6 k
</script>
! Y: Y+ D* i1 q' \% E' b( q
9 a6 x, h2 M- w3 [! K
% ^+ t& [& t" w- e4 p* S

8 A% x) O4 {& Q- f1 o2 {
' q' F: B6 y; i7 s# }. q6 w- r; G
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了