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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

% X- q* l6 f3 r
0 O5 _  h9 T/ _* ~0 h3 i- Q3 v) t8 X
/ x! E! R$ l6 ?9 I  a# L1 d& N- w; B4 A' |5 Q
<template>
6 B& {4 h" _/ n% i# {  <div id="App">
/ b* c& h+ n- C- I: n6 @    <input v-model="inputValue" />
0 n" a# s% o) D% J/ V& E    <button @click="submit">Submit</button>
* P1 ^( n! N& P. L) G1 N    <ul>2 s  ?% g2 Q1 h( H2 q
      <todoItem  _5 ~7 D6 r" Q# p
        v-for="(item,index) in List"& Y! t( e$ O: N
        :key="index"' T# a& q" ]& y2 t
        :content="item"
( Y6 D6 y6 M, I: {4 ]0 d        :index="index"0 I6 L, D+ p! z$ m, P0 w
        @delete="handleDelete"* Q% a) r$ h5 E1 R
      ></todoItem>- A+ E! k# s- h' _+ a/ A
    </ul>
7 W8 r) V  o- f5 M6 p7 A  </div>1 J" ]0 S2 ?& I7 I3 ?0 d
</template>
% x2 l* b  ?" z/ p% d+ `9 V
  B  `$ Q$ n. q4 W! V<script>
  m) z# T. _0 }/ d1 Aimport todoItem from "@/components/item.vue";; |8 h0 D. A3 f! ~9 W  H

5 c* B3 w7 @3 T8 J/ c& Qexport default {
6 ^( Z7 {! F) o* b- D  E' j  data: function() {0 ^0 L7 k# _/ Q* L0 j% L
    return {
" F) m5 I" j1 a; f$ ?, q! h, E# T      List: [],
: c7 K4 @' x; `5 Z% w' E0 t      inputValue: "") {7 S9 U7 t: a: F; L" i
    };: o9 _9 l- ~; G
  }," X' T: Y; E' R9 ?
  components: {
% R' B2 H' {4 W" s    todoItem' {, v" I0 P. o( n. R# n
  },
# r0 e4 V7 P( }& u$ ~  methods: {
" B$ c7 d" }& ^$ ~    submit: function() {
8 _. l1 x/ H' g% @+ O8 S2 h+ ^' k& c      if (this.inputValue != "") {9 x" P: t- a- P
        this.List.push(this.inputValue);
7 g4 M% E& e; Z* r      }# v" a9 p+ p& S9 n1 T/ u
      this.inputValue = "";
. ]/ o7 U+ [8 _2 [- v, f) c* q+ e" w    },
6 ^- V! v. w" j# X" m. V0 C    handleDelete: function(index) {
1 Y. ?/ a$ ~: N' Z7 k      this.List.splice(index, 1);0 i% Y. `9 \- n# F2 W5 O$ y
    }7 i9 ^( C9 S/ A2 g! @! D0 [
  }7 ]' Z7 B) j# V! U$ }, ~
};
. a9 n) }5 w/ A$ o# A$ ]</script>
6 j5 a) v3 D5 W" Y% r
! ], b: n6 U& v, z. ]2 `8 ]5 b" b% _  l$ I- K) N, L

$ |6 F/ N! L) J. _; @; G, e/ B
: i) u, J: v4 |, W  a$ R$ n" L. Y, w" A) l# }0 w

, }3 C7 Z0 ]" E# h- p
' ^7 d1 Q2 y  d: A% h<template>
0 {) n4 W  C6 |5 G. D0 o  <li @click="deleteItem">{{content}}</li>  p0 F) h9 t, T0 R
</template>
6 n( T! u! T+ N, @  @' ?. j- c8 g8 V. k
<script>& X$ M& G1 z, N2 [5 x0 S
export default {
2 D# J. b* q0 h5 O1 ]& U5 f) I  props: ["content", "index"],
8 @+ F  V5 ?1 j* d  data: function() {$ Y6 K7 u( f. i, L
    return {};5 m$ A( |& C* v; ~+ w+ W
  },
, x. X7 I" v/ K$ Z* X  methods: {
0 w- E- T& N0 `, K$ E    deleteItem: function() {
* z9 T, x7 o5 @; M6 _      this.$emit("delete", this.index);
; y* Q- e1 a7 H) d8 K. c$ \8 o    }
) p' s, k5 |2 G  }
$ V$ B1 w( j' _# A};
. k( [' L: m, z- w" K* }5 I</script>
: C! h' ~  \6 r+ u6 H2 {' t: R! R0 j1 _$ @, N7 G+ D; g, S
1 ^' A3 s' y$ Q4 F! x
! B: x/ [$ L  g

  x- i0 x# X2 ]- |: R1 y- 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二次开发专题模块培训报名开始啦

    我知道了