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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
/ U7 k$ ?* Y" r# b8 L' h

% E3 J6 x8 s3 r
! G3 }+ d3 o# q4 L5 y
: v' P% @. p( j7 q<template>) W6 W' r0 f, H9 N$ f
  <div id="App">
. v8 J/ g+ m! Q9 ?9 Y  z    <input v-model="inputValue" />
' i/ d  n" z9 `! o' ~  B    <button @click="submit">Submit</button>; [, J% r# l$ T. ?! |5 U# ]" z
    <ul>$ O3 s# x  _: N9 b1 K( n
      <todoItem" `. m- E7 b, y; e+ E
        v-for="(item,index) in List"
, ?0 v0 W! k; J        :key="index"* d6 Q8 [: ?# d& C; o
        :content="item"/ `/ {( ^7 r4 E& d  m
        :index="index"8 Y. T; P9 Y& k( |" ~
        @delete="handleDelete"
1 A7 G6 A" h' U3 Y7 X; y3 S" r      ></todoItem>2 h! f+ s# j* r( Z0 y5 [
    </ul>! `# Y8 W9 h& b7 `- ~$ x
  </div># [* U" P# E! j2 A) L% ]8 q# F
</template>3 R  @! W. I7 ^! Q( A+ N/ c% ?; {
2 D5 X2 }0 E) |: _7 x7 @
<script>
! R! o; |% C2 |  f: O+ T. n7 dimport todoItem from "@/components/item.vue";
) Y5 r9 U! k2 z+ f9 }$ t4 k6 W$ @6 a) C9 k& w
export default {. Q- E+ D  B1 m/ P
  data: function() {
! V( Z+ A6 g* y    return {) c5 x) l. g! B
      List: [],
% \7 M/ `4 Y8 @* R      inputValue: ""# l, V1 H2 S+ k% T/ {
    };8 s+ w+ @- m4 `( Y! k4 v
  },( ?' F1 o# G8 y- x! g0 \
  components: {2 h( p( i4 ]  j7 O" L
    todoItem/ o* A# _, T4 }( d/ c3 h; y% X
  },; j; B4 D$ N7 A4 f) A' M% G# E6 D
  methods: {( x# |* L4 z$ |/ L/ T
    submit: function() {
. x* K9 n- j  Q% C7 z! \      if (this.inputValue != "") {' N2 |8 @) j3 o3 d: L; o
        this.List.push(this.inputValue);' Q/ F/ {* W1 X$ f9 D
      }6 ~, c( Y( I, E/ S+ {: H
      this.inputValue = "";, W$ ^4 A& V* n; y' T
    },7 H+ o. r% h4 G6 u5 t
    handleDelete: function(index) {' k( m, Q3 N" m6 l! c* K
      this.List.splice(index, 1);
6 ], }. e, p5 @  l$ |5 l* o# v    }$ Y0 d3 n  ?# F% R
  }0 f( r! x3 J" ~5 p
};
. R, P, E' [$ {1 v</script>
0 }( A, i6 p5 o; U9 y, }; i& z/ b
% g# [! _1 |, A" m2 U% H

- N1 }  w) c) D. s$ p# R7 K$ M& \  A( L  h; w( C+ J& W

- Z6 |5 ^7 n0 e0 U7 ~" R
/ ~. `  p5 `. u! o! `
' O, {/ P4 o2 l2 a( O<template>
* k. ~* x2 M9 {' Y9 p  <li @click="deleteItem">{{content}}</li>/ J0 s) `7 X( f# S) d# i, c  w# v
</template>$ P2 I- W; C! _, d, \7 y: W
* }3 {5 ~+ }( A4 g9 U2 @3 A
<script>  ?) @. Z4 ~, E- a( A0 F8 o* ]; l; I
export default {, E0 V1 J! N' l+ x0 c* V
  props: ["content", "index"],) _, Q* l$ e! t3 i% y  w
  data: function() {! @) {' H: H; S# {, ~& [0 A
    return {};
$ J2 `% J1 r9 ~6 N' t6 g  },
  u1 v' t7 B. n) w$ i; [  methods: {
# f  F" d$ P  ^& w+ F) I    deleteItem: function() {
6 u! T+ ^/ ~2 m% J0 @! N5 a; m* x) ?5 k      this.$emit("delete", this.index);
' H! ~0 v: r4 s3 _" B8 V& V+ h    }
( I" u2 s: C3 }; q% p  }
% P) m" l! o: b7 {& j};2 q/ Y, }+ I" f  S& P- M# L$ t
</script>4 o/ m9 K* |9 G8 A8 _
; ]6 T5 V/ C; D0 ]/ h
, `. z3 N6 R8 m  m+ h
( s1 b! n5 D4 i* F+ N6 I+ g

( S7 {1 c* `+ Q. O5 t, t/ c
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了