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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
& R; {" \* y! n  q- ?& p( e
3 B: W1 Q2 ]$ b& C8 H* Z
# g/ X$ U: E$ v* X  Q% U

! r9 m, Z, t; K<template>
* `& Z* `6 P. a, A. c0 t  <div id="App">5 C. T- x( X- B( r8 L1 b
    <input v-model="inputValue" />
) A* H! C) ~2 j8 h/ B9 W( E0 K    <button @click="submit">Submit</button>
) \8 P) E* Q1 q7 O7 Z% Q    <ul>7 `  C* F( I+ N
      <todoItem# b  p* E8 p" z
        v-for="(item,index) in List"
5 S3 g+ V  n6 G6 B$ g        :key="index"; s# M8 t9 e1 H9 @, R' c  q9 m
        :content="item"8 b  X5 x9 k; Q7 j
        :index="index"
) F0 |' y% A- e, i( d  w        @delete="handleDelete"
. K3 F. |1 F! G6 g  ~# d      ></todoItem>. `4 I& R( ^+ A8 X' O0 d- U* F8 A1 j
    </ul>' l1 u9 j  P7 x# n" k( m
  </div>% T# Z  c. L5 A) L
</template>! [) E: e1 L* z8 U
  q: f" Y9 d9 c1 l) X+ p
<script>, P6 W  T: d: W
import todoItem from "@/components/item.vue";
0 G. v& l2 N: M. E6 @- R9 e: X' o% r( m2 `. ?2 e# b) \; _$ ~
export default {
; g6 S$ Y( x+ T  data: function() {8 u' v! K; E0 }: ~2 j+ h
    return {% \5 ~- U7 j; a: q+ b0 |. D! x$ b) Q
      List: [],
$ ?+ M4 |, Y0 f1 C( u+ S2 {      inputValue: "": V, d: V4 _. G2 J' @
    };
, f( o- _& k7 d" m) A" k" G  },5 c& }; C, [$ c! P  c
  components: {3 O4 a! b" Y8 w
    todoItem
) E8 P+ O3 N$ x. t4 ]2 K$ X  },
- M& y% [1 b9 L; O/ L# c  methods: {
6 p5 S: q4 w& q) q- |8 ?    submit: function() {' X: F7 K% x0 X% k* j
      if (this.inputValue != "") {1 X; w. k! W0 d; ^% g
        this.List.push(this.inputValue);
8 B$ M3 @' |4 |; v. S3 D8 E5 a      }. Z! D: z) X  _0 D6 e
      this.inputValue = "";
, u4 }+ V/ `2 V    },% X* x! e7 B% g, G. w
    handleDelete: function(index) {, X+ Y! v+ {1 `9 L1 u' y
      this.List.splice(index, 1);; |1 [* }; C; p  I' a9 J. ?& W+ e
    }
9 y) [5 {0 _! _& R6 u# v  }
7 u( W" z! N. s};. h- {1 G0 N0 z* S/ n, j6 W; {
</script>+ W! D6 D! o. E$ o9 G: ^; l6 r

* }. R0 Y$ B+ s# K% P( q& U; x! ^$ h) \: _1 s. t; x

/ `6 G" w* g+ S: D/ W, n
7 W  L* }0 N1 M" A# a' V; X) R) k: g; \
2 H: h' |& ~+ {) q9 G4 c
  z7 Y$ r2 e/ B: A  p* C
<template>
7 D0 d- m0 M# Q  <li @click="deleteItem">{{content}}</li>
& h5 n. Q2 H3 T</template>
; Q4 R7 T7 i0 i! V9 B! ]
' N6 i! m4 V* b7 F- B<script>: g$ y( e' ]- o$ y1 n: w3 O1 j, O) _
export default {
0 B& G8 l* }7 v. I0 L9 E1 }& ?  props: ["content", "index"],% G4 {5 y8 Z# J& l1 f3 Q
  data: function() {( N1 ~& ~  e( a  a" _
    return {};
9 W5 C. ^# X% M5 V' A, @  },1 @0 U7 l. M* r7 s, Z' b. N
  methods: {
5 e# h% t, }, n  E7 Q    deleteItem: function() {" b+ B! `: E, I, y% u2 L
      this.$emit("delete", this.index);3 o/ n6 E9 ?' x* N3 _3 J
    }+ z8 l1 p) a' y4 i, z- ^$ d
  }$ ?: h$ P% c3 T; T- j* z, G$ `# @- e
};) I: `' a2 g) _5 _* B
</script>/ f) D" O8 B6 T$ r
" j' C4 e& |$ ?  o3 b6 i
1 l8 @- N% t& Y' n. W) k6 a! s; u
( |+ w( q0 b- {& V( N

1 n, V% @7 p& x$ p4 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二次开发专题模块培训报名开始啦

    我知道了