PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
6 ~3 Z+ z# h! U

* ]0 z: `! Y0 C6 s, s7 m4 S5 M2 t( X, q% ^

8 x' p/ O* D$ n<template>* y. h3 a( [" {& M, x
  <div id="App">
. k/ m5 R6 y( ^* j8 ^    <input v-model="inputValue" />8 x1 E% q; X( m/ Z. I9 P, `$ f4 q2 ]
    <button @click="submit">Submit</button>
1 V  a* L. q; s: B3 U    <ul>  m/ L4 U  |: W5 U: b
      <todoItem
6 `* Z/ {" T6 ?& P  L* O$ c        v-for="(item,index) in List"
9 K2 ?3 e. n& t8 ]5 q! r        :key="index". x' f0 U4 b' |% m" D+ v4 a
        :content="item"
0 H, W' t! j% D* M        :index="index"
0 K, e9 f- o. e- W' ]" M- ?3 ~        @delete="handleDelete") A+ O4 J; f7 r. k& O
      ></todoItem>
4 i: r3 w! L* D; |- c+ D4 F    </ul>
0 z5 p+ z4 V/ P' j( a% g  </div>+ F) I9 \' h. p0 K$ C: Y
</template>% n8 c' _: h! _; G8 w  }

& d5 y2 B$ c& k* R- {<script>8 \$ F' I5 D; b5 X: w9 [
import todoItem from "@/components/item.vue";
7 F( o) ]4 v- A* X6 x5 T4 U9 A/ M7 z4 ^2 B
export default {
5 i8 d) a7 K+ {5 x5 L* V* y  data: function() {% R  S- O* U/ F& ^
    return {
1 e$ F; u+ e. }/ p$ z, m      List: [],' ~/ W- }. {- V: w0 e) Y1 g
      inputValue: ""
# [4 R! V+ E: o+ g    };: a( o4 c. x7 x$ @/ G) q  N! R7 A
  },# }' z: j3 ^+ I3 o# M' Q
  components: {7 U3 a8 h4 `  _& y/ [4 d
    todoItem3 H  d! d+ N' u4 [# |1 c. U
  },
0 \. H3 ]3 U" f) i% C$ ]1 W0 F! F! s  methods: {
, n4 S6 I3 p) k% W- r2 s, T    submit: function() {4 C5 W$ I( x6 o* m
      if (this.inputValue != "") {9 W# J/ |6 i7 X
        this.List.push(this.inputValue);7 n( I# I" J# q: R# H# u' b: W
      }
& i* y/ R& O0 t3 @+ ]- U      this.inputValue = "";! v4 E& t/ }0 F' a
    },
0 E! f, L" h* u# l+ e    handleDelete: function(index) {
- X" [7 Y# Q% J  U$ g      this.List.splice(index, 1);
+ F1 t' l! F5 b( G- o    }
& g/ {; F% t  \6 Y6 c' c: X+ d  }! x+ ~' x: ?7 [8 K$ p
};
* I+ w  A, c& m2 @</script>
, a+ t6 {) D1 M% @: H% R% j
/ H. T) P0 V6 o' h9 H  y+ u" h0 F) ?  D8 \. c6 C- S! L4 K, Q& @
' `8 D( n; q, p

2 n# M  Z% M1 `2 F. ~/ h7 m
7 s( F0 X0 B7 ^* L0 r+ J. L4 c9 t- i4 _. z  g/ a

2 h, E/ t+ w: _2 r0 W9 i; _<template>
3 h0 _1 o1 S5 @  <li @click="deleteItem">{{content}}</li>; R1 D8 G% {, n. C! G
</template>- J+ z' X$ e! G0 S. X2 C: a

- n# a9 ?; i3 o" ?+ t1 T<script>
2 ]( g5 D- ]; L% Q2 kexport default {
) M! ]0 y0 k2 Y! I7 t$ j$ Q( [  props: ["content", "index"],
. A  }: ?3 e$ A  a) c0 K  data: function() {
( w6 D# i5 z* b4 Q& M' |9 A7 c    return {};
9 H: e0 C3 i& Z, M; K4 U' ]  },1 {4 r9 y( C9 q$ e, D
  methods: {
4 D+ ?. r& Y% J" o" ^& ]    deleteItem: function() {0 O0 q$ I: m" F& L3 s, ~
      this.$emit("delete", this.index);
0 c+ y" a0 [" B+ S1 S* j" J4 W    }
; j) u% j+ |- b. f; J, ~' _  }
# V1 r+ [( d7 l# q& O};
3 @- P8 w6 h. _. T+ g2 C% r1 c- n</script>9 W# h: N8 A8 S7 M8 x. Q( O- ]9 X; G8 A
4 [& W' ~7 v; `- w0 E
7 Z  a6 n7 _' K, _8 K# C

7 g# L) F! P% ]* r  t. |9 I
* l  o0 a3 W& K+ ~0 T( Z/ n
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了