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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

( N' Q$ G+ P1 e7 Y' F: H# n: h4 t

& d* ]1 T7 y! b0 O: r
9 x- d4 R: T7 ^; V, h8 x" P* U<template>! q; ?: x  [7 A& A% _; u6 H/ M
  <div id="App">" b& C5 T  n  N" a! n" E) {, M9 X
    <input v-model="inputValue" />
5 `! E; j# t9 B$ N- S5 N6 Z8 R    <button @click="submit">Submit</button>$ b1 L- Z9 `9 N+ R
    <ul>( k1 P/ _7 J8 s5 U' y6 P2 N
      <todoItem
* U6 n4 O2 C: I& ?' d        v-for="(item,index) in List"
8 r/ @$ f( C' I# l  y7 _! V, w* P        :key="index"4 r9 r4 O4 ]) i4 x- g" V$ h
        :content="item"- V7 n5 I; ]& o
        :index="index"
+ q6 J$ ^: t, v0 O% q, g/ N        @delete="handleDelete"1 k  T6 l3 a& g6 D! \
      ></todoItem>
8 `% v* B2 E! g7 S/ }! K' \    </ul>( S9 n+ u5 d4 X
  </div>" G2 l4 B# v: p; }& K
</template>
" ~1 K, }, ^6 w2 d' c' v2 Q
, [+ m! G( Q( t<script>" L6 `: ^2 T- i( m; d3 |- E8 o: V- s
import todoItem from "@/components/item.vue";
9 r3 g1 ^6 s9 x- x
4 }- J7 V8 f+ Aexport default {1 A) j, d! r: a* d, h+ P
  data: function() {
* z9 E" s+ t0 b0 Q# D7 h# f    return {& v3 G- ?% }3 l' u+ G$ w0 {4 j  t
      List: [],3 j" e* q% x. \% g# {
      inputValue: ""
. q+ q/ D" O7 T+ d  }    };
, {$ ^2 h8 D* `  J0 v/ C* Z' X  },
6 N$ ^* }) W3 \9 @  components: {$ F- X; D. R) u6 {2 S) P4 E$ [. k6 q  y
    todoItem( `& P/ o" x( f3 b9 @4 S: x
  },
' O, N% g+ t  ~- k6 v  methods: {
0 P4 K# T, s% ~4 a    submit: function() {
. y6 N+ [0 Q  h& h; S2 L4 c      if (this.inputValue != "") {
. B# C( D) \2 b, a( E, h: m        this.List.push(this.inputValue);
" p. N* Q& o! Y* [$ U      }
' E. U. n( m! O$ ]2 B# _. ~  o      this.inputValue = "";
' K3 O+ R  Q$ |    },
% L% m3 [& Z- n4 ~2 N2 J    handleDelete: function(index) {
- S- h. \7 u* [3 z      this.List.splice(index, 1);( f3 {( T/ _* j0 h8 q: a
    }
( O5 U  S1 u) O$ u- Z3 L' [  }
& s" T6 W# E* y- J6 _1 }5 u/ e};
3 [) h" c4 U( b; w3 ]7 C$ M+ D# R8 A</script>- S& g3 k3 H( @. k& c2 K+ Z1 g5 C
$ Z' o6 b0 X1 h/ @, d
6 ^3 x4 q5 h; _# c: X

  _* c: a) O2 x" r' }6 l4 K' [0 X: O1 G7 s. h0 l

, p6 C# v+ y0 U" Z) A; B9 L5 u6 L3 l8 q" N
- D+ y9 a2 \; Y7 G; |4 x
<template>
* {8 y3 K! d9 O  p$ `. Z8 Z  <li @click="deleteItem">{{content}}</li>) Q  p) w# O  P: e# v( [" x  c
</template>/ j6 u  Y  c3 j# l: C+ |$ i5 x% X

$ C5 v. X( j: h$ q# Z) m: r+ y<script>
, W# n& f1 T9 v: D" t" [; Gexport default {2 x% {) X& F& `
  props: ["content", "index"],
3 b0 R$ f0 G* D8 o) [; M) s) {% f  data: function() {
" F9 y; `7 \8 a$ P    return {};
6 \; o  C( U( i/ p% p  },
2 ^3 [* }3 L2 I0 Q: Z# I8 W# o' e  methods: {
, g0 V) q# R# ~. E' [6 J  X    deleteItem: function() {% e. ~! r7 r+ v8 J" u
      this.$emit("delete", this.index);/ f( s7 I: `4 o
    }7 b% Z, _( ?( c
  }/ h+ f$ A) b% c2 i- O8 z5 W
};
, d: Z1 o. z7 T, O5 c  R4 U</script>) o' W  o" V5 g. y3 c

4 Y& E* ^: _" E5 V8 |$ M8 H2 [& O" N# J# C1 V1 q$ P

# H" F  m" E7 u  u( o/ n

+ l+ t1 j4 ]3 E$ h
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了