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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

* c3 X; \' O: y% u/ s) B7 H" i0 E7 O: q' R+ }2 ]
9 p6 }2 i& L/ R7 X. U8 D- c

, D6 p( ~( ]7 d7 ~. ~( g2 {' ]<template>+ P% Z; l6 u; Z+ C" \3 m, l# i  [5 g
  <div id="App">
* l0 W( R1 r# [" M: x9 Y% e/ d    <input v-model="inputValue" />
+ ^" b+ {8 @8 F; e. `: L) e) \    <button @click="submit">Submit</button>/ L9 `+ V2 O3 O" |
    <ul>' Z/ j. u' _/ b
      <todoItem
/ D/ y0 ]0 a! G" k5 \$ B# h        v-for="(item,index) in List"8 w! {( H3 J+ c7 }$ j+ H; |& z3 x
        :key="index"  \& X4 d/ B( l- e
        :content="item"
! `( C: |% [; P# o6 G2 r        :index="index". C5 O0 ~  @3 F; Q/ a: q3 a
        @delete="handleDelete"" S8 Z% G4 R* z" e+ y7 N; u  R9 K
      ></todoItem>
, ?. p9 E+ T% Y7 @9 Q2 B( I8 M    </ul>
& j, T1 `0 Z6 O/ R3 y: Y  </div>7 H, ]9 I. p* H
</template>
2 c. n- `2 a- v. k: B% O
" w5 @6 w7 w( X. E<script>" Y- U, Q$ Q- T% w8 i8 ?
import todoItem from "@/components/item.vue";; f* t5 f4 s8 h  x' }

( Z1 m0 k5 R% ]1 a7 Y$ d* r' iexport default {( |8 e  e0 p& J1 e9 E
  data: function() {
5 J' L% Z# \& W* t+ n- j5 D4 `7 `    return {; F1 A; Y/ `9 C2 c: U
      List: [],. ~4 u1 \$ J9 I8 }; ^
      inputValue: ""
3 t, F2 p$ c- W    };
9 b( c( F0 _. O  f  },: ^6 g4 F6 x3 A" _- J; w
  components: {
6 @8 F, n" x6 W; B: c    todoItem* R4 V9 X) ]2 l9 T6 K4 x0 S
  },0 h; i/ V- Y  v- I
  methods: {
1 x3 o) G& c$ Q* t    submit: function() {
5 k# G$ e0 J0 T! g      if (this.inputValue != "") {
/ \9 f  k6 {$ I2 s9 ?. B  i2 T2 C2 X        this.List.push(this.inputValue);
% ]% @' l/ b; D  v2 D      }
: ]2 L, j  a$ A3 \      this.inputValue = "";7 q. }: B* D, ^' p8 X
    },
8 F6 ^% B. v* s% T- Z* O    handleDelete: function(index) {
9 C  h2 S/ I3 S* T( q+ g# N: @      this.List.splice(index, 1);
' ?! E- u  t, i4 E2 ]% b    }% j0 h9 y7 A: k5 _
  }2 W1 ^& Z- i# G0 O# P( l/ [# x8 E$ ]3 u
};% ^! p+ ?' w# I
</script>0 u) B! v( w6 N+ z

# s6 ]% T# _- g2 D6 |: K+ L: w8 V: Y" q3 i0 j% k3 e+ B

+ Q# [2 h, }& |" W( Q$ ~7 z2 X( l! e' d
3 d; d1 w& z$ Q, K0 O3 N4 A
4 `' d8 d7 t; {
  w7 p/ B9 H1 @% Z$ ]
<template>7 H; g4 {$ ^8 k6 e" x# p: D# J5 J+ d
  <li @click="deleteItem">{{content}}</li>5 |* _% y/ h- l% ^
</template>
! e6 S" g$ k" g% x- U: T* z) s8 M
" F* s. N& L+ C* o/ A; I, j) Q<script>& p# [2 P( M- h3 @
export default {
  z$ k0 m4 c( y# h  props: ["content", "index"],
5 {8 s0 J0 V8 i- o8 o  data: function() {: k3 ^0 M0 F7 O9 U- X  A7 K
    return {};
( J$ k) Z3 ?& c9 W# x, B5 E  },( C9 K! [# q( t5 B- Q4 B: b7 ^
  methods: {% B" H8 w5 N. j
    deleteItem: function() {
$ v" [5 L3 a7 V5 Z4 W# [      this.$emit("delete", this.index);
  T+ ~: [9 ~( d) ?$ g% d    }- M4 w) X' @( f% A) p  _( Z6 `# l
  }9 i7 O2 V! a' X2 O8 e
};7 v" n: |3 T$ y4 g
</script>2 m2 w% N- B) A! h  C1 B

: c7 [# p1 ^: U$ K) O; F! b  D0 M! T

2 Z1 t5 s1 z" ^5 C

+ o) D* j1 F! p1 E  R
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了