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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
) R  L  Z7 l4 g% a9 V
1 d$ ]  @9 [5 V" R9 T& K' f3 m" f  W

: C9 t4 W  U" o3 W
  d5 s; q0 x1 I<template>
9 a7 Q8 P; a" N+ X6 e  <div id="App">7 \6 ?0 N' c) b1 s6 o
    <input v-model="inputValue" />
6 q0 j3 Y1 z, C8 c! o& P* U" {    <button @click="submit">Submit</button>: e2 x+ j9 I& a: r
    <ul>
+ ^. y* h3 x5 r      <todoItem
2 d! F6 R, u4 u, s- x6 o6 p/ O        v-for="(item,index) in List"3 R7 y% d9 g9 z! t! G
        :key="index"# s8 C* O5 E* ?6 a0 s/ h
        :content="item"8 h# B) ^" n8 }. F% ?
        :index="index"$ j5 g" z% E! {' Z
        @delete="handleDelete"
% `, N, h9 ^: i& G9 T9 C4 O      ></todoItem>
0 C# a; V2 Q4 D- }    </ul>! o2 f, O0 a" r0 Y4 B( _) x
  </div>
7 r- X# |0 g! X2 S6 x8 R- q# N</template>
4 }7 @' C( [/ _) [4 e
' g( L0 N1 }9 q0 H! k7 a9 I<script>
3 _& X3 z( g8 I. @import todoItem from "@/components/item.vue";
" m3 F2 g* ?7 A! C. n# ~6 N6 S4 @! R- u; J# T
export default {
9 H% z9 d% K0 L5 m, G- F' A) D  data: function() {
. {3 G7 f) h+ L3 D    return {+ v3 c1 A8 L* c
      List: [],
; d% ^9 ]& c! B% o8 B  k2 Y      inputValue: "", Y5 `$ o3 _2 C* t
    };
& T1 [6 k+ U+ p( X3 \0 I: ]2 _/ X  },
+ w* b% ~  R% E/ ]  components: {5 z. a$ n$ I2 z8 g* a% U
    todoItem7 [( a  V9 U+ T1 r8 Q& X) O: {
  },
  O& p3 a/ x, ]: i  methods: {
. u. f, z) C6 t5 X! \    submit: function() {2 x/ ^0 g5 J% E
      if (this.inputValue != "") {- A$ `" m- o3 G6 D/ v
        this.List.push(this.inputValue);
" L0 }4 Y2 ?& c; o& c      }
  W- M: B7 `) C      this.inputValue = "";- b$ s* _7 A2 w) W  N+ Z
    },1 H, L! o( p6 v% g, M
    handleDelete: function(index) {
! q- u  |" B( l4 j      this.List.splice(index, 1);6 O; Q: V4 x2 h# M  Q& [
    }* W* g- `: N5 d* A! h7 c* ^
  }
1 x$ @3 m% ?7 Y/ u3 {4 g7 W};+ \6 c, S" @4 {& G) p7 l% U5 @
</script>
5 o& T- M  k1 f
" a- [; j: s: p) e0 X! B) K/ P! X1 i
. }# q( z3 g  ~6 N/ f9 }* \' F
/ p3 Z3 j4 z) x5 G6 `+ G0 D
. L3 s8 t4 V; [; k0 e8 v- V+ o
' t2 i- A+ t' \( x
/ Y# ]6 H" s5 S! Z) T
<template>+ t8 h. C# F( n! V
  <li @click="deleteItem">{{content}}</li>- Q' U3 R( J, |7 r
</template># o2 k4 ~3 n# A, z
% I4 }$ B- R, F7 k: a1 p
<script>
4 W, A/ D2 R8 W& k  {" [" iexport default {" J+ f: D7 ~  v0 A7 X  I
  props: ["content", "index"],
& [- M: S0 W1 i! Y1 e/ g2 A3 `, U  data: function() {
1 A* _+ L3 H3 B    return {};8 d5 m& i3 D# u7 @/ n
  },
8 F+ l. G+ M5 D6 o  C6 w% O' E  methods: {
$ h+ ~0 r- I- c* i- z    deleteItem: function() {
" |" @. N7 I8 s4 F      this.$emit("delete", this.index);; v% a1 d/ v  E
    }# V. i( g! k8 A- {% k
  }
* k+ a$ X" v) {4 f2 X};
# b4 h/ b& m7 x+ n& ]; d</script>9 x; X6 a6 A; c5 J# u
$ L$ M  S$ G6 i7 w$ Z

% `3 \/ M7 J7 ^, C# f. ~. P
% u8 S0 P0 H" z8 k$ ?- r
6 z/ N3 y6 |6 ?3 [9 O. X) V( |
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了