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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
6 T1 L5 j; k0 |% M/ O

1 V; j1 ~- P2 Y3 V; k: W  X$ Y8 i. X& M: y" x

( h6 q7 ^: }4 s8 ?7 s# d<template>
0 z" r2 l) z' V. S2 s: I' J  <div id="App">  L  Y6 O% ^' K3 A
    <input v-model="inputValue" />3 N% N* ?2 X' n# y# _* j! d1 y
    <button @click="submit">Submit</button>/ [: y6 u0 U4 W: }+ O1 a0 l! ?
    <ul>) b! B( a5 |1 b5 \! i# D
      <todoItem& K' h& b# V: U( W" |  \! _% |
        v-for="(item,index) in List"
! n% O& t4 G- m& X# P        :key="index"
& y: h1 o& R( L" l        :content="item"8 E7 M* @3 H& N3 t( n
        :index="index"* X3 d0 H  X1 ]. U, w
        @delete="handleDelete"
% @0 ^3 O% D1 N      ></todoItem>
6 V5 x& L: x% K! C' e; N/ x4 x' U    </ul>" |+ x% u1 r& M, n
  </div>5 Z6 ?. {0 ^) z  z  j. k  z  {& M, K
</template>
/ y" Q) q# y% Z0 c8 X* W) K5 D* X( r( x8 L6 [
<script>5 R: l3 a) `5 x9 a9 b' T7 Q$ ]% g$ l
import todoItem from "@/components/item.vue";
: E- V0 @8 z; {
' S0 k: R7 G% _& xexport default {! }$ `% v! k6 z5 a5 v: H. K
  data: function() {
% V# s" _9 l4 m* d/ p/ j7 a    return {
/ m! {9 Q3 z/ w, l) W      List: [],8 g1 A& W" |( s: L# i
      inputValue: ""
  m4 i% x/ S  d) H    };6 o" y/ k/ Y/ h- S
  },$ E$ l  H7 v9 ?, `/ V" t
  components: {
8 _+ H* J1 X' G8 R6 L    todoItem% y% ^6 i" ]+ M7 _6 y; |2 G5 T
  },
. m. h# b: J- u( E  methods: {
" S# Z  b/ ~% m+ p1 e0 L    submit: function() {
/ t* P. c' D; S. p6 I1 _7 u; f+ s      if (this.inputValue != "") {+ o+ g1 F) D3 }& g( T! W1 j2 B7 P
        this.List.push(this.inputValue);
2 S- \  C) A5 V$ B      }
- C! @. V) E0 c8 }7 s- ^+ {      this.inputValue = "";
& w$ x* _6 ]5 A- _5 H) j1 ]3 |    },- |4 O- M6 ~* z
    handleDelete: function(index) {
7 T  A& b2 h7 n3 p* S! M- E, ~! D      this.List.splice(index, 1);8 u# x9 P8 s. G# n, P6 c
    }. W% V9 H/ x3 x8 u9 m* I5 W1 D  M+ ?
  }
+ C. V3 @5 Z4 I$ m# C4 o  [};
- |' x% Q# ^3 L8 g- M2 z7 z4 u</script>
3 \  H) [. i- H. i) G! t$ ]% Y; ^
' c" q* {7 u: p& \! u! I- v& ~* R' J3 E* `- c& g; N
" ^( m7 C0 P7 G# X4 d

5 [) e$ q& S" ~4 g: k$ K: Z% S: x. J  Q9 i- D& T

, `5 T  ~0 K1 S. a! _8 Q' x  ~: d  f% E
3 O# M" x* R4 Z( n$ U<template>
1 v3 g& O- M1 s* ?- v; d  d* w  <li @click="deleteItem">{{content}}</li>
8 O! T) z9 q! T. k. |$ ?</template>
* D) F7 F' \  r. A2 N$ I
& V# \" o  @( j<script>; @- T. ^8 Y) \! _1 `5 Q$ f  ?
export default {; G* q* _# }+ Z+ x  K* M
  props: ["content", "index"],1 h- C& y5 k; O2 h5 Z8 S
  data: function() {8 E* C3 i( l+ d4 g: D! g
    return {};, j# B7 ^7 z: \
  },
$ Q; D5 }. i# G+ p/ |% X  methods: {
, n7 E3 E) C" k$ a5 Y; A; ^    deleteItem: function() {! f; {4 Q$ N  C, [
      this.$emit("delete", this.index);8 S* o6 s4 @1 P3 @4 R$ r. H9 o+ U
    }
! q* v! K& d3 r! Y' [! Z! U7 J  }1 W/ N) n; Y# ]; Z8 Z- g+ \: ^% w; l, k
};
- P; a+ ?; n: D3 ^$ |2 \</script>4 x9 g  ^% X2 X& I/ t  {  ]
. w5 J4 f$ q/ _2 S3 ~
  o8 K! k' }1 f- `4 g/ S( c

# y+ }2 Q! w+ Z% G2 F' M! X' x
$ {8 T5 @$ t# n2 O# |
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了