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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
8 y( ]5 d2 e+ s3 J8 _/ x) U7 V
9 d8 p+ j, Q" k9 J7 L
6 {+ ^$ N0 ~( T4 l; T( @7 I
- I+ U8 {5 c! B: |5 V$ H, j
<template>. y. s8 i" n6 A5 j# h0 t& _) I
  <div id="App">
" I+ B; S; a0 R8 S    <input v-model="inputValue" />
4 ?  S+ k6 h5 r$ ?    <button @click="submit">Submit</button>4 P% j8 c  f( _7 V2 Y  n3 x4 z
    <ul>
: P! q' q7 ?4 Q; v2 I" q& _/ {      <todoItem; K6 L& C# ~5 ?/ I4 C4 m9 `1 ]
        v-for="(item,index) in List"
  M4 h! F- |" `; @* ]        :key="index"
2 K8 |- T' l6 b$ F* x+ Q3 V- _* U# ]        :content="item"1 H" c* o+ p1 B9 J; G6 S- S
        :index="index". C4 }  }% e* [' d/ o
        @delete="handleDelete"
5 J( s4 W/ o9 w5 x* ~" P- p      ></todoItem>
: ^; O8 E3 [; I    </ul>
, Q* K' l- L' C  </div>
" w9 \1 X; l  X9 v</template>
5 y8 F* ~# l2 |0 P& U+ ?& n9 h% d* h! a) S. T' u, b3 D4 B3 ~5 ^' e! q
<script>
8 O2 Z0 m4 T0 Gimport todoItem from "@/components/item.vue";8 ?8 A7 [6 \% t; J, a

; H# |9 {0 j3 c. Lexport default {
, S( _! l8 C5 p7 R* B: b  data: function() {
) p& O  @) N* c0 n    return {' Y8 Z6 _8 W7 Z' ^2 l
      List: [],0 ^6 {, W5 U+ {! z, y& B# \! f
      inputValue: ""
) O4 u2 D; h" G* H* I8 v& r+ s  l5 ]! ~    };
& h$ R" e5 t# M) u; H  },
, A, X" C2 K4 g% {. @7 y) @  components: {* O7 N  n& i! H* C; g5 y' u: Z
    todoItem
; A6 V  q( o# w  I: f0 }! K+ B  },
4 S* Q* W" U) V  ^% i  methods: {* }- Q" e% `  L) Q  B3 ]
    submit: function() {
! S7 X1 u$ H7 `6 ]+ d3 @      if (this.inputValue != "") {
5 T5 ]0 F6 \3 e        this.List.push(this.inputValue);& t& q: V& ]+ v2 g5 d* t/ F
      }
  |5 m' ^; _$ t) b6 v$ y5 ~      this.inputValue = "";
; Z4 Y  r% P# O    },) P/ f$ `2 ^3 n" e1 d0 ^9 @8 l
    handleDelete: function(index) {- y! L: q6 q7 j0 O
      this.List.splice(index, 1);
% @  I$ O. `/ o9 @, p    }) L. i' k* U0 _1 C
  }/ q2 b5 A7 L9 C& f
};
% v3 ]  E+ f# `* ~% ^</script>/ Z8 K* |/ V8 _/ L  C: v% o

+ B* L7 X, u, w4 ^( i+ @  Z2 W
! x& l+ h: P7 I( ^7 Z) f- ]

1 k; Y/ E* j2 h8 T. \& g; |$ }# {" Z4 L( L4 S

: x3 w. @" ^! Q. U) B. h3 W9 {0 x* E- X; W* c' {
$ e- h' h! _! P9 ~9 |+ \
<template>
1 F* s( v7 d2 M5 m7 O  <li @click="deleteItem">{{content}}</li>) @$ u+ u3 U" z% }
</template>( L4 h1 H3 l6 `$ b! O
+ l6 S+ W% _7 v( r" |  C& k& ^
<script>
7 t2 u2 w/ D! W) j" `+ b5 Lexport default {! n$ p* p3 e5 `& Z. g2 ~( \) ]
  props: ["content", "index"],7 w6 v. }5 K  a5 [+ ?) U& C  Q  m
  data: function() {
# f1 ]" s, j7 M& n0 ~/ B3 ?8 c8 ~    return {};
4 V4 F5 l1 h' A0 t3 [: ?  },4 _1 j* u* f1 A
  methods: {
" H2 h. H% \2 a, M* M7 {4 O    deleteItem: function() {
  |) _! @& @3 v4 B5 N      this.$emit("delete", this.index);
3 x1 f7 {5 c, J! s4 v% X) T    }
$ X4 e1 `6 `1 U9 W# [8 ?  }. g; \7 F0 F- H7 o2 a8 e
};
; f1 J/ ?( r/ i# f  x* D</script>
, {/ L0 N% b3 c9 h* ?5 w& `7 A1 v; F. `. {
2 @8 A) ^0 Z/ W6 Z% ^
) e4 C6 q8 ?- L& D' r" q3 P

9 b* l9 l% q0 {( |% k3 C0 C
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了