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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

% \, ^9 U9 f# a1 e( y
- ?% x" [2 n* c3 _8 b4 b3 X9 Q! J! q: Z' e( x

; N1 ~. S3 q7 w0 d<template>- W) x; F/ t* r5 ^* N- P2 H' |" c0 O
  <div id="App">& a( V( ^9 g& x" ~) N
    <input v-model="inputValue" /># p, r" i! X5 M( _6 `% [* J
    <button @click="submit">Submit</button>
! M% N! ]+ j- d4 n% ]% I" f9 h' C. ?    <ul>
* G8 U0 N7 d1 \2 f; O      <todoItem
8 [# q2 n7 b4 U8 G3 t/ u; r        v-for="(item,index) in List"
: _$ j) o" L1 ~7 A3 A        :key="index"
8 e% v6 t0 V; O/ u: u; Z        :content="item"
( G* ^3 }2 \6 t: Y' J; h, |        :index="index"+ Q+ A* J' f( _6 V7 ?
        @delete="handleDelete"+ q& {1 z, G" ~! z
      ></todoItem>; T* v: M+ ^; T% ^7 K
    </ul>
" u4 |4 M) _/ _+ ?+ X! B  </div>5 C, u4 w! ]7 S
</template>9 O8 z' t; h( U, X% U& R) z( P$ o( t
( K" y4 Z: {8 ?- g
<script>4 h' E7 {. v) S0 {, |
import todoItem from "@/components/item.vue";6 V+ U* p% E' }+ t

. w. C$ k- }( Z& T; O% K! a7 |: p6 Xexport default {
: R0 _! F: a' Q( |  data: function() {+ R. ?! {$ C) _2 R1 I
    return {3 S( m9 T  x7 h$ u
      List: [],) R! j# w* R& E
      inputValue: ""
" q( r) c& X& g3 {    };
( @0 X  R) e4 I% E7 s+ x% u! W  },
  N; M  W  M* c: J  components: {0 v( x1 e4 a; i: W' Q! G  w. B
    todoItem5 `% }. D- q- s' U" f
  },
: {0 ~) f) _8 u# H  methods: {! k+ f6 _/ ^$ C4 O: k+ f
    submit: function() {
$ C4 i& A8 k% L      if (this.inputValue != "") {
2 Z) i, p  d& j1 `/ C        this.List.push(this.inputValue);  ^. n+ M# k" E4 p3 P
      }
- A, P; g9 h7 b      this.inputValue = "";! R, p1 o" b8 {& V
    },( s$ \( V0 g8 M( d  S
    handleDelete: function(index) {
* Y0 k0 {  c$ T" I      this.List.splice(index, 1);& Q+ d( @- O2 ^
    }% _( f& r$ J$ J* a3 ]
  }$ [9 g) ]1 ^" u: S) q9 z) Y! `
};4 o' V: S/ c1 L
</script>! h% B& b: j4 O' S
5 f8 g$ r4 e$ G% T* r8 Y  U

+ h3 n& [# J; [
( c$ l1 G+ f" N6 |, V
0 B8 q+ Q! N+ h! T% v6 ^3 u
: E3 d) s; E  [% i
( `2 \2 H  w5 R- q) E" Q. f5 t
8 d9 S' u7 h$ s7 B
<template>! S. H+ W" N9 k4 s* ^& {0 t6 i
  <li @click="deleteItem">{{content}}</li>
/ e. B& T+ g+ H. V</template>; c" d4 n, q4 P/ |* |0 M+ L
( P+ e" `+ G9 n9 F& |, n. @
<script>
0 Q6 E0 y2 ~, P) b  B7 G$ Yexport default {: d+ E! w( Q# l6 `2 n& {3 H( ?1 h
  props: ["content", "index"],0 U( ~0 v+ Q( I) z4 y; g- l
  data: function() {
  @$ A* D% p+ p' \# W- ?; }, `    return {};8 x* O2 B8 U% O* G6 V" }" T
  },
0 H) @7 [( D0 q" ^1 n; P! W& O5 X  methods: {
. ^- y4 h/ x$ [5 e    deleteItem: function() {& S, w% m, [1 t$ r3 M! ?+ n9 y
      this.$emit("delete", this.index);
7 R( p5 Y+ G+ H1 E* s    }- D% h: \. n- r4 H3 p4 ]1 N+ k
  }, {, K+ H& M$ w3 L. r
};
( X: J. E+ D4 C  g% T</script>
! u; n! D% p* S" I/ q& E# T. B% Y: V' z2 H% e6 y
) q1 E& r, ~' _' \

2 `4 C- U+ b# j* M# ^7 k

3 e/ m0 m$ f& {7 F/ y1 b' R. J
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了