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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
1 Z/ O# c9 B, c2 l: V

, S. _( y% l5 ^8 E3 e5 p5 h9 `
% c- L% A* h+ u" u
6 ?- V: X1 R+ V; ^+ |+ ^+ ~<template>
/ m( P7 H  ^! C$ V  <div id="App">1 `9 i. V4 Z8 A$ L4 U
    <input v-model="inputValue" />
8 Y1 [/ W9 t) Y; P3 Z$ U9 N    <button @click="submit">Submit</button>
9 L9 F+ J6 D1 d% G% _1 w, M    <ul>) F2 e; ?9 N( y, O
      <todoItem
6 C2 Q7 S- y4 M/ R  h- U* C        v-for="(item,index) in List"
- P: M2 |& M9 g( \        :key="index"
, y! \# X- Z- Y  p; R5 Q( n4 h        :content="item"7 K2 M, \0 ~1 B! n
        :index="index"- T: K" q& w1 l- T* e& R, `: ]! s
        @delete="handleDelete") b  u4 C7 E3 K! |. H1 y( z
      ></todoItem>
4 d1 U  Y2 g0 ?    </ul>  y7 V  T# Z# w+ H/ i! s9 K5 T
  </div>
7 K5 l8 G2 E3 R! T/ F8 R</template>% u3 y7 R$ |3 ~- N$ T! m
, ^% f! f2 `! d+ h( i; Y4 S+ V+ T" H
<script>
# }; A. v' d0 k; }, T$ d  Zimport todoItem from "@/components/item.vue";* e2 C2 _- g8 E+ M! z

  U5 \/ }$ |+ _! ^9 A& c" kexport default {3 c7 r) m7 e, A$ ], {( W. A
  data: function() {
6 D$ y# {$ p8 U& d7 k, E$ e6 X0 S7 O    return {
2 X) j( O0 U2 J1 V6 o      List: [],
3 V+ V+ |1 d0 w( D  C      inputValue: ""7 O6 I' T" B; D8 V* W6 d7 B
    };9 {; R6 h( q% O; X
  },
7 ^, r; t2 b" C# Y* i6 o9 d0 ?9 O  components: {# \6 `4 |# s! L) D' B
    todoItem
1 G7 A0 s& \9 |. v1 @  q  H  },
- D7 O: g( J" U  methods: {
, U9 _; Y$ @5 Z# z; }8 t    submit: function() {
( S  }7 E0 U& R* V( Z      if (this.inputValue != "") {' o, K0 ^. ]) ]" _8 }2 j
        this.List.push(this.inputValue);# d" t( s- V  L  ~( D! ?
      }& u( v9 z& T5 d2 O  u
      this.inputValue = "";* P: q* ?$ C  i1 v7 t
    },) E1 k2 h. V. N1 @- R8 z+ `
    handleDelete: function(index) {
( Z" n- c+ @2 N# N7 D4 u6 U2 j1 V! D      this.List.splice(index, 1);
2 S/ D  F. G* e; L4 a- S2 e, k+ {, V0 o# d    }
2 W; F* j6 ]) r5 z. h, Q  }: Q4 L5 o+ ]1 b7 D& a9 I& S
};
. N" [+ V$ l/ U" R* g- G- s+ W</script>
& V. V4 @* b6 k- ?" n$ X
" G, E( U0 j6 U  H" A, I
* d, b. v8 P1 G+ q% n+ s  M
( \4 z  T3 c0 S9 H& g5 e, C

. I$ B/ }( _- N5 L, ^
1 k! q5 z  j* [. e5 [: w2 H# a  G% M3 z+ {

8 {. a5 f4 d) f7 r# \<template>
5 @. R6 g7 r* s& d  <li @click="deleteItem">{{content}}</li>
! p) w+ \, ^# X+ P5 |1 x</template>
8 e- ]( F. k/ u9 x+ _9 ~( y) y  S1 U6 D4 m. i4 X' {
<script>8 r6 ]: ?, l0 F1 d- _1 p- p
export default {
2 n- t1 G: x- L: ]) z3 u$ b$ z, L  props: ["content", "index"],
& L* {* P2 \+ C- }. N5 _  data: function() {6 N0 S/ m8 ?' y7 I1 Y8 ]
    return {};5 N9 r3 z" M2 Z
  },( C2 Z+ q+ `" d5 Q
  methods: {
& T' S2 p7 C# p& i1 h    deleteItem: function() {
; `- t4 N) t  D3 H( p2 h- F4 i      this.$emit("delete", this.index);7 r& ~7 @$ o! U
    }
# n: t+ _5 ]# M# N0 g  }% P! Z( p" a2 a$ e
};
5 J+ q# L+ T3 a7 ?1 U0 y2 \</script>/ D" U) u5 I. o3 n2 e8 i* ]4 j4 K

8 q/ l( N7 d/ y. W# D
+ B4 c- X9 `% W1 f
# J8 T. L3 Y+ b7 K$ u. H
, S2 j; u0 t: X
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了