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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

$ q# L4 [/ {7 }" s4 ~/ g# w: W6 o& ], y3 e* Q2 z2 e
$ H, u# W; [* `$ L( \* Z$ G
. F! P1 y) [, H, o7 a( u
<template>
* A- ?0 s* E. [2 b: g  <div id="App">
, L; d: I3 W4 F9 ~* T/ I! y$ c- L    <input v-model="inputValue" />
+ A& S) A9 C7 k" Q7 |    <button @click="submit">Submit</button># N; t. W; G2 E7 x) Z6 b6 |9 I
    <ul>0 X) }; b: d( {! |6 @3 F' A
      <todoItem& u& ]" }" F: W) Z/ A
        v-for="(item,index) in List"
# t; G7 Y) g# q3 e, X. D        :key="index"2 r% z, H! q: u, c: n
        :content="item"
( @; s" D5 W9 Q7 M        :index="index"
* @) M# U; e7 [& C. L+ Q        @delete="handleDelete"
4 B( Y1 o7 @2 J      ></todoItem>
) n; |9 c5 ^( s* D1 d6 x    </ul>
# h9 Y$ U1 t% k6 p3 O" \  </div>* G1 Y( C7 f. [- X
</template>1 C' X) A' }  P4 H
+ k8 t4 m$ R, X" G# Q1 E: s. q
<script>: C- b/ q+ \0 B2 h
import todoItem from "@/components/item.vue";+ j+ Q) Y" \3 ~# U  a

9 H4 R  @0 Q. u" `8 o+ T# Sexport default {7 ]( a+ T- C; E% P  Z
  data: function() {
+ \: w+ P# z! y. d    return {6 w# L3 H/ }0 g6 U8 a
      List: [],( j) a4 v3 o  W
      inputValue: ""
/ Q2 {7 f" ^, |+ \) |' V& M/ H9 B    };
8 c" P9 U- V; C: Y9 g, N1 f( M  }," F# ~" t% M# P, y& q9 [
  components: {
2 E" ^5 A8 c7 ?6 n4 u    todoItem2 ~$ b1 }; |1 F3 \5 j
  },3 V1 s# b# C* G7 t* m% I
  methods: {) m) {0 d4 S8 n0 s( Y1 Q, E
    submit: function() {
( O; K* Y8 C6 l" z7 t6 J      if (this.inputValue != "") {9 ], |0 `1 z+ C0 t; ?
        this.List.push(this.inputValue);
, w, t+ x: k' S, l; U; }6 z4 M  w% d      }
9 y/ M' t" w" x      this.inputValue = "";
) E' G& e2 Z# q1 ], v) ~- z    }," N# R* J( n" J8 t$ V0 o
    handleDelete: function(index) {! V3 C5 Z4 p/ T' M$ m
      this.List.splice(index, 1);: J3 F3 l& {+ J# p& |
    }
6 L+ i2 D" ~& P( t2 T  }: K. K" c- E# _. d# ^/ I( r4 Z: r
};. O- p5 r, N* K4 b! k6 S
</script>
1 J! U$ P8 Y: n- T. f; o, S
2 W% M! s" b+ M% [9 a3 Y, @' U1 B8 r& c, Q  Z+ P) G

# W; e) l9 U# W' Y+ [
2 D, _3 Z. q1 U: u2 @
0 u0 g* H2 U4 u& e) A; ~$ ]. O# w6 `  T) b4 n0 q) ^, a

: V1 B0 t4 C& B& X  ]7 I  L. L<template>' k+ \+ G& i4 A% S2 R
  <li @click="deleteItem">{{content}}</li>; G0 f5 w" Z3 K0 K, Y
</template>
. M0 ?8 U" m) a" Y$ w7 q
; M, Z- g4 I! A+ ]# `' ^<script>
- U1 l) u* M# `9 hexport default {
5 x# Q- {- n0 X) h  props: ["content", "index"],
6 @# n, S0 T+ F: Y. `5 ~0 l  data: function() {
' `( T4 G4 u# o    return {};* z+ k4 f4 z: B
  },
& Y5 |, _4 ^7 T' b. f  methods: {
. |+ i& S0 |# j. f" [/ [6 P    deleteItem: function() {0 t3 P6 L2 l$ H! _+ o: h
      this.$emit("delete", this.index);
* p6 Q$ l9 c+ ~4 m! K" K    }+ S# s: i$ M" h. e% k) ?( u: P
  }
( a: j* l9 J$ F- }$ c};+ w) H: m; B6 i/ c: p6 j& F
</script>
+ n$ u! k! Y" U1 s! Z3 r  o9 `  y8 q
0 `, }% v% h8 A( }$ E9 o

2 J. s( x. q" f. ?; V( ]

) O: w; U: p! E* _4 P7 t1 l' 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二次开发专题模块培训报名开始啦

    我知道了