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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
9 X9 a, `3 k1 u1 P( \3 u

/ r: I: v8 F' n3 Z4 D# K7 `( j5 w
, s6 o% [! x- g. [& D
<template>7 e7 O' L2 ~2 x
  <div id="App">3 J1 i/ c( y0 ]- i
    <input v-model="inputValue" />
$ g: t! O$ c/ K+ ^/ Z% e8 @    <button @click="submit">Submit</button>& ]$ L0 _. h0 m! c1 J- m8 f1 T
    <ul>6 O' O+ e% C+ l% }( D
      <todoItem
" c; v4 h+ R3 L: f$ F        v-for="(item,index) in List"
9 k* r; p1 }+ G! D8 d" x        :key="index"' b* D# I& K* i7 G9 v5 D& J
        :content="item"
: k  W) U4 v) l& f7 B- r) d        :index="index"+ z, y. N0 w# W( ^# _  ?
        @delete="handleDelete", f! d$ E5 u6 m- r. ]
      ></todoItem>9 m% `& o, S4 y  [" }' Y" V
    </ul>
8 [$ p6 X1 t" I  </div>$ T  M, E  B* h5 _
</template>
$ U& }" Z0 K5 d' }. }. V0 I
, j/ @) F. I0 i& k3 ^+ r' T# K<script>
, Y) V3 X8 J0 R3 `, A) M5 n8 s5 Rimport todoItem from "@/components/item.vue";
! w* a" K$ m' \
: d& t# B2 x. @+ Jexport default {
8 b+ w2 e/ D7 r8 O# l4 E  data: function() {
/ x/ Q& }5 x# W$ |; l    return {
+ |8 v' s( h4 S: I/ B. S' x      List: [],  M. `4 J1 o2 O
      inputValue: ""
3 g5 ~+ W# K8 t# S  x% t    };
# w9 |+ ?5 q4 l% j. z1 W  },7 l9 x9 p) v6 R
  components: {
& l& g" r/ K3 e    todoItem
1 t* z$ Q8 v8 p  },
1 x1 a+ \. V/ }0 W- S  methods: {) `" F7 S0 V3 ?5 }
    submit: function() {) i( V- y, |8 ^: l
      if (this.inputValue != "") {5 h( B$ k% Z7 ^, V, b: z
        this.List.push(this.inputValue);
8 e# C2 @5 z" G9 ^2 O0 B      }
: \2 X$ r# I8 g5 Y1 j, G      this.inputValue = "";5 c. q. Z1 F6 P: p
    },+ _" _# A: s' I9 p: S
    handleDelete: function(index) {
2 T4 R4 P7 W& y0 H4 Y$ c      this.List.splice(index, 1);
4 M3 E7 i$ |4 p% q    }* a1 a! x5 O/ \. v. N+ ]4 P. L
  }! Q' E. E, W. k/ |
};3 A6 Z% a+ m! r9 i$ f
</script>
; _( y0 K: v: E* A
1 t! o/ m- c6 t. ]$ I' p: V% f+ C- p3 t3 \
6 ~3 P2 q4 A' u
+ _) j8 D! Q4 l7 w# a$ r- A

8 S1 B9 v& \+ L7 Y/ V: x4 r6 I  y0 c1 v
+ b! Y3 O" v" T% B& @& q5 |9 \( r
<template>
, k. f: l& S- n% u  <li @click="deleteItem">{{content}}</li>1 T! k8 T/ ], n6 w
</template>4 u5 ?1 G& P9 q3 j$ \8 R! _1 A

6 g" D5 B7 X6 t5 a<script>
. ^' r+ S. K" Iexport default {5 {: V& i# \/ w8 x
  props: ["content", "index"],
3 ~, V; m! h. H7 A1 k  data: function() {
( a! d! F6 a+ v0 c, e    return {};
  G/ N+ Z8 x( y+ H2 P  },/ J0 o0 |. g# w+ n& T6 X
  methods: {
6 g, k2 j$ \3 u    deleteItem: function() {; T( n, x; w1 u4 `
      this.$emit("delete", this.index);
% O% p& W( e; ^4 q' V+ I$ j  S, N    }: W" c0 Y$ Y: P" ?2 z0 k( G; P
  }$ X6 p: J( }7 @! L
};
  G9 K! e+ U. @" Z</script>
: c3 d& f8 a7 Y' h' |: _7 z1 V' V% T2 E( ?7 S
7 p6 H) l- {0 y3 D4 q
% I7 z3 {9 ]5 Q/ B9 h/ C; u( Q) [. [

0 x. S2 @% x5 ?: {2 r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了