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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
5 F9 D8 }& P& F+ c
- S$ g" ?5 I! p! J/ P! a1 o' g
: c$ X" X9 ?" @8 Y9 u2 f

; t% p: h4 `4 L6 f9 j" m5 t<template>
$ t" B$ v; Y: w+ _$ b4 }8 j  <div id="App">9 M. f1 k- ]- B" |9 `' ^4 P
    <input v-model="inputValue" />
1 s3 V7 A, y5 f/ V    <button @click="submit">Submit</button>/ P3 `, j* \+ M' L
    <ul>
1 y2 W2 q& C0 d' g  ^; P3 R1 ]      <todoItem+ v2 I- B1 b8 h, q( z  c
        v-for="(item,index) in List"
( {$ E; j2 Y( o4 W, U        :key="index"4 Y. h5 k1 B& z8 s; d, V/ O
        :content="item", F7 \. C6 U8 ?3 X0 G  E3 s
        :index="index"
+ U6 h3 g6 M9 Z; {' _2 _% o        @delete="handleDelete", m% v" Z* C, R0 J
      ></todoItem># n; K  O( _7 J0 x' `- a
    </ul>% W- e. ~! ]6 {0 \. r, T
  </div>
- @2 P& ^' H7 t4 [</template>
9 T- I2 p) I" c7 ^) a1 f5 Y# l) L9 X9 ~
<script>
3 A8 b$ s1 [1 A. {9 kimport todoItem from "@/components/item.vue";
$ u+ @4 W# _) N% L
: V3 U: ^  |. M( bexport default {+ @1 V2 Q& H3 d: h9 o9 a' E# E0 u
  data: function() {
1 p; A' q( f; }, f    return {
+ Y8 b6 i. e; Z- _5 g0 I$ p1 y1 \      List: [],3 [# ~$ R" j+ F
      inputValue: ""$ n" U& P2 n: z1 L$ p' Y" H. s5 H6 Y
    };* V% T; R& v. ]1 l0 E
  },
: x1 m8 K! q, i+ A- Q* `  components: {+ h7 H" p+ i' S, L/ b6 U$ f
    todoItem8 a$ P! f* B0 S: G  i
  },! V# p) |0 G8 M. O- M. s6 L
  methods: {
) U& D$ d5 G0 m9 ?, L2 q, t. u  M/ F  M    submit: function() {$ B, K  r4 V6 @; G5 h
      if (this.inputValue != "") {
- u( b, Q* R0 l' ]1 Q3 g        this.List.push(this.inputValue);! L; }+ g0 H! O5 I2 Y8 B8 U: m
      }) J" Z- H- ?1 [& y0 k4 p7 i7 m( a
      this.inputValue = "";
6 _  c  X0 p" ^0 E0 ^- r8 t% J. `# F% ]! F    },; i. L* u; q  a: N
    handleDelete: function(index) {. u* n7 M9 w5 C1 [  z  k; x
      this.List.splice(index, 1);" r: |$ X* o( \& k" T/ z% ?
    }7 h( o! K0 m! }" ?8 x
  }
) ^, p: `/ T; M! U};1 q" t7 X# g1 U( S- d1 T
</script>
/ J0 ]" _3 Q5 z7 h' z5 _4 u. h& z

- D! {! s) ^; M& |9 M

7 e6 \9 U/ D0 u$ C0 G% g6 j' H5 D+ _4 d9 j+ G
; p5 D6 g* |. z- V
- f( Z# |3 L+ @" D- {; B

; w& V7 P* z, V5 C8 A% ~7 R<template>7 Y" {- Y. y; F, T; l& x) n0 a
  <li @click="deleteItem">{{content}}</li>
, \6 O+ ~- ^( F- i  h/ C" e. t/ ^</template>" g1 I% o( W& c! ^  U" F  A
' _1 _1 V% i* ^  t, B4 X* d; D
<script>
; D* z  r- |5 t2 ~export default {( [: B1 `6 K7 Z+ {4 x
  props: ["content", "index"],& S9 ~2 F- k; ^  `0 _" `9 l' b5 Q: `
  data: function() {
+ E# W  `4 P) L  N) T5 b    return {};
/ ]/ }) F; o+ J! J9 h  },
- [; b+ ~, ^1 f) s  methods: {/ i8 e1 I3 ~) Q- ?- u( n' J
    deleteItem: function() {
8 d+ A$ J, k* R, L8 K' B! S3 _  ~      this.$emit("delete", this.index);# y$ N& {. [7 H& j. [( v+ B6 y1 ?
    }7 A* H& `# Y7 O
  }4 ~0 X" Z- |2 Q% T4 @8 x9 M
};
" z! _* {7 b! a</script>: L# G4 t; l# N. o2 `) U. f
$ X, l8 `- w9 T  v8 d( {

0 j" u# g) @! b* `- I

! S2 |: L# }, C( d! ~/ m6 x+ K
  `  i6 N) @  m7 H
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了