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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
8 q1 O1 Z# U) D. T$ O0 e% S" T) C# E

0 h+ Q& t( V! x/ P/ ~8 e( x# |- M& O) Z, J/ U

. K9 m  U0 h9 V5 K( o) |" Y3 ~<template>/ x$ `3 X4 ^* z
  <div id="App">
% _, o, W" e7 ]' n/ \+ {: E    <input v-model="inputValue" />" O" V# y5 [" \; l0 p# A) }
    <button @click="submit">Submit</button>  \% L0 i8 ^0 t
    <ul># }2 H) E$ R- X# i5 k4 ~3 I
      <todoItem
" `- V3 r6 ?( x        v-for="(item,index) in List"
3 c& n+ j  {% `( n        :key="index"
3 T0 C" n& V8 f2 d, B        :content="item"
. p4 V  i& r4 X1 `        :index="index"
* l$ w5 W: H( f  J, i% W% H; C& ]        @delete="handleDelete"
5 `9 `. W* w5 z$ c2 u      ></todoItem>
) C2 W* B4 [8 @( z3 h: g    </ul>; }" n0 q/ o. ?7 }  C! x
  </div>' w9 v. P$ r" ]* D' }8 c( s
</template>" ^& d6 A/ M9 N9 t
* E! Y! X! G7 Q6 r
<script>
7 d* F0 N; y1 y; C( himport todoItem from "@/components/item.vue";
: x5 P: i+ Y+ }1 l, f. Y
/ ?2 ]5 ?  T; Lexport default {' B4 P* \( G5 |5 W0 r; w
  data: function() {8 P; ?% D; Q; S
    return {
8 V% ~/ F+ U  n: _. K      List: [],$ ~; U0 z( `6 }4 K, h! U) z" z
      inputValue: ""
! t6 p7 i  ]7 q: C6 z$ g    };* A) M' I. k9 t0 V" u% n, z
  },7 }; u5 S' X% o5 Y& g$ S! n5 n
  components: {
, y5 x7 H+ m( W    todoItem
' g6 o( ?6 F" G. v6 `  },
% ^6 \, @/ q7 [. r, {5 P! e  methods: {5 `- B* ^. z' ]* E4 l
    submit: function() {! c4 N3 i- t2 y2 _
      if (this.inputValue != "") {
0 n0 M$ m+ _# q) T; L7 L        this.List.push(this.inputValue);
, X  d, @! Q: o      }
: U0 c) e& j$ p! F7 i: q& C2 }      this.inputValue = "";
8 `+ @1 q, P/ h" D7 \) d    },1 T; C2 h9 x- m( c. c  P2 J
    handleDelete: function(index) {! J* [1 r: j# n( h3 K% H2 a
      this.List.splice(index, 1);
* w3 V; U3 N3 |4 ~$ F8 u# m  r    }
. `& j: p! C* E6 b  }
+ O1 e0 _7 ~1 C% T. ?! Q. u% ?" D. ^2 r};! {# q" E$ X" v& s: |# W+ `- c
</script>
% g# u3 ]1 H2 A
! a- O" F! T$ w4 w" n5 {: ~; |6 H$ v5 |& a0 W  D3 P: ]

8 e0 V) a; k9 B/ n- m, z# G; [; s7 S1 R- p; d
) y% F; O/ B- j' b  t
2 {8 h2 O( V$ R) u  M" M

# c  k, w. p! l<template>% p& {. k1 ^& I+ i- S
  <li @click="deleteItem">{{content}}</li>( G4 W. x! G5 M# w
</template>
5 S; M' w/ \% A7 h( A9 F
) I3 C3 ^% R$ q<script>
: M% Y9 T" O0 ~) H5 O) Vexport default {. M, G0 e3 K: J' g) A9 T; W4 ^
  props: ["content", "index"],0 {" V3 v& J! k( \# B
  data: function() {. h# y* s$ T5 ]( s& s9 D
    return {};
5 m) a0 n- T* X+ G, c  },
$ G7 z8 D, m8 e  methods: {
6 s7 o2 s, ]" C% _# b    deleteItem: function() {
% P: G' b4 [4 p# q- \  p' ?' b      this.$emit("delete", this.index);
8 X: H# v& T' v+ H    }
. K# [+ Y: _5 L/ G& f- L5 \' j  }
: x2 Y+ E' l8 x& R# j+ K4 g" a% _2 P};& g7 D0 {2 }# Z
</script>4 l% n' n0 s3 G. F, k# Z' Z

& [3 W$ t% b1 l" J' }8 d9 Z* t/ X$ }8 f! y

, ]1 _2 l- H4 A( `+ I
5 I1 e9 A3 Z# c! D
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了