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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
7 Z! B4 j. K3 E* C1 n% B

# B( r4 Y5 T$ s0 k2 M, R) x9 }$ U2 A, |8 v+ T! R, _

) E; p% V. v( C) z5 x* [, u" l! `: X<template>  O; p( S( _" @3 e  n) m
  <div id="App">. g( Y1 z1 F0 o( L" c* G# E+ r, K
    <input v-model="inputValue" />
( H1 Z' @5 L, `! e1 e, g% G    <button @click="submit">Submit</button>
) K9 O% \7 j) j" |    <ul>
8 f# E3 |6 \2 z: Z# S$ l% i+ S/ t# {      <todoItem! C/ e4 z- m3 ~1 z" N: |2 b
        v-for="(item,index) in List"
) b# x0 T) `8 K  i' i! j        :key="index": G9 W; C% `& ~0 f; E2 p  v; F% W
        :content="item"
! k* o$ q" y- F6 h        :index="index"
6 W$ a& i' T. m" J+ c9 B6 d. l        @delete="handleDelete": ~2 L7 ^* l9 `! f; `5 v2 T2 r, }
      ></todoItem>$ ?1 p* r# e9 I4 O
    </ul>' h4 i% ?# T, c$ q1 {$ c( m7 h
  </div>+ Z4 a, z7 l0 V5 N: S* F
</template>
. Y% G* F! s* C' E1 W: v0 X, W$ w8 X5 A7 d: w, j, e
<script>
+ g2 V) e+ _* p; t# uimport todoItem from "@/components/item.vue";
0 f0 [8 ]( w$ w! g2 D' w! k1 W
+ e7 f/ t0 `  aexport default {
8 X1 p# r$ K% W5 d- Y7 F/ p  data: function() {4 Z6 W& L* O  Y
    return {5 X9 W( X  I4 f+ f  k. Z- D
      List: [],
; Q. |6 s! w# O7 f! E, N, F      inputValue: ""# a; s8 n' n( E# a% h  y! Z
    };
  v* L) s# G  _2 X3 e4 ?; t0 Q  },7 I/ j  ^2 P5 `$ ~
  components: {7 j9 Z& Q# m/ Q4 k3 b
    todoItem
6 x, D! x1 W% C' ?; i  },
' W* \( @6 J9 p* E# _  methods: {
7 T' C7 l, L5 j    submit: function() {
3 Q, D5 t: \( R1 ^' y      if (this.inputValue != "") {' A- z( B# L2 i6 u
        this.List.push(this.inputValue);( H. _* |: ~' D7 L
      }: n3 W  |: f( c3 B
      this.inputValue = "";
- S- ?; ]7 t: y" [$ k, H% x" p3 E3 v    },- ]% O1 f( P6 V) w
    handleDelete: function(index) {
. F5 i% s5 s( a# R6 {. q      this.List.splice(index, 1);* g7 [" A& M7 C3 \8 v6 h
    }! Z, n' K9 N  B3 i. C  b1 l/ \4 e
  }
/ ]- e$ H) @/ L0 \- W};
. X8 R% K5 D3 w& N6 b6 c' b2 m( \</script>5 x/ L. {2 s  g% p& F6 F8 g: a
+ A$ C1 u5 O8 k3 g/ T" g6 l" K
6 R" }1 v5 @; Y& v+ j" f) c( H; E8 F
) u# Z; G1 Z( P; W5 ~6 T

5 D9 k. [: h9 a2 D& F' F/ L1 d$ B, `9 M; [
/ I" I/ {6 Y; ^% |: w8 S
. O( ?1 ^, N# d. M, S
<template>
! o" w% J, D; u3 o( C8 M' @  <li @click="deleteItem">{{content}}</li>
4 t3 U/ z5 g7 A1 L4 F</template>( s3 r, F2 U3 z( s) G" q% [) [8 s
2 n8 G+ B9 z% C8 z
<script>3 f* E. V* z4 t
export default {
6 Z8 l% ]) b: ?. e0 `  props: ["content", "index"],! s( z6 I& q) M% p/ ~
  data: function() {. q' b! k6 x, J/ i! ?# S* {
    return {};
6 P1 W" a2 X# J8 T, i' g4 ^  },& r  Q+ a4 e2 H* U0 A
  methods: {
. H. [# I; l0 [# I7 O, q    deleteItem: function() {: ?; a, }: w' m- N) F
      this.$emit("delete", this.index);
2 O8 d: S2 O& O  ~* u0 T% u    }. i9 C6 P7 i% O: @; i0 k0 ^4 ^
  }1 R( V% |' W3 p% e0 D  h
};
0 e- ]9 r8 j! `4 V</script>' P4 _) a) W7 I3 [8 l, ~( w% Z! O

3 q; E3 ~/ ^9 v2 |1 I; N1 y& S; G  A& q+ t; @: ~9 H# w% q

$ M6 p' e6 T  f# ]8 s
0 T( {- Y4 n0 L( _  Y" ^
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了