PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

5 r9 t) W# x7 Y5 n7 G0 B. O5 d2 K& h/ _1 W2 \8 k: A' _

; p9 c0 S" ^. }; {, E& m9 I4 b6 e8 f" m! `
<template>
6 t8 V3 k* ^9 s  <div id="App">) b- |- m' S- z  l
    <input v-model="inputValue" />
8 v1 F9 F  O5 H4 B; U8 o2 O    <button @click="submit">Submit</button>! C. X* [$ `1 p9 C
    <ul>
: f0 o$ b7 o, |& n; G      <todoItem
7 y5 y, z! Z& ?9 R' X9 y+ v        v-for="(item,index) in List"' g5 ?( Y' q: O+ V; {
        :key="index"" @, |3 G" x6 j  K! W9 o" D
        :content="item") u5 `. T5 c$ K. S; A
        :index="index"
5 b8 P9 O9 m6 C) P& k4 N7 o) k! N        @delete="handleDelete"
% g/ t, T6 e. M) m+ O# `% U      ></todoItem>9 s9 x# a+ c" u
    </ul>2 o6 B( m0 t8 b2 F
  </div>- |  o0 }6 U9 b
</template>8 ?/ _8 y# l8 N, f

: @  n0 C/ L$ B- T<script>
# T! }' `$ {$ {/ U$ Mimport todoItem from "@/components/item.vue";
* M+ p5 \9 C9 f# j0 l9 x" m- \! ?, H9 c' b9 e" P4 Q
export default {
0 B2 m. C5 c9 n  data: function() {
1 l7 {4 z, N/ G7 ]    return {
/ [2 ]4 u6 ~) Q  i+ ]# t      List: [],9 |! Y5 e1 h  V* f' w- ?! \
      inputValue: ""/ K# Q. C) ~9 [+ l% I9 q! P
    };
1 ?$ f2 {) h5 N  k6 n7 g- |  },) N% ~; w, `/ |/ x+ e1 k& B
  components: {. E9 x8 i) b% K! P
    todoItem
* k8 o, {6 R( H7 X' |: U; y$ a  },9 ^) E& j* u( ]4 }
  methods: {
7 H. w1 N! A- E+ p1 z; @" p    submit: function() {) b4 E5 _4 o& ?1 \, |) I
      if (this.inputValue != "") {
4 L' t" P6 b+ K- _3 e) q% R1 ]        this.List.push(this.inputValue);
! y5 j% C. t5 F9 ~1 o      }2 T, _0 A4 \( L2 m( P
      this.inputValue = "";0 [+ Z" i$ m  U0 ?# J7 U/ l8 Q
    },
( m# C4 [( E/ U" y* j    handleDelete: function(index) {
0 {3 g7 m6 a/ f  U! t' Y      this.List.splice(index, 1);
) a4 D8 B9 E& q3 f# X9 R    }
" C/ `& e4 R# T  t3 ^0 }: o1 I! w  }+ I- x# P: u5 i
};& V$ T4 u) E/ E* a# s. \! {
</script>: M! w& Z6 [; o5 m. n

0 w; g+ d9 e- N) r/ P# v( O2 g2 Y( @

8 e8 J! E: e- f( M5 x
0 X: q& J( V) H+ I' ]# L) [. `+ Y+ ?" u& N* ]
7 M7 K) ?4 Y: n! [

/ X1 w8 t' e+ B, K1 O. j<template>
- g8 [" v7 n2 [% B, l. t, s2 c  <li @click="deleteItem">{{content}}</li>
3 `6 W: A+ V6 a: K</template>6 J( z1 k; r1 z! ?' Y
$ H  i- S, ]8 \' E# t  |
<script>: y3 b0 d+ h% M: F
export default {
% h* @% p- p' d+ o  props: ["content", "index"],! g0 ^7 D4 C6 d; U- K  Z2 |
  data: function() {4 k8 |5 W  Y, [; ~. W7 l
    return {};
, L+ A& V3 g  a  },& n: E8 ^4 P5 U
  methods: {8 V2 _  h% e) t  {
    deleteItem: function() {% ]6 h" f# j9 I
      this.$emit("delete", this.index);
7 r0 \+ E+ z$ c3 U: x    }
2 N# d: H: k% J, `7 ]: H# ^& F# _+ ~  }! d, a7 ]9 }0 r
};
# W% d6 Q3 g1 r1 U; P$ _: D, A</script>" Z" ^$ C( `1 H! ~0 |

* j0 }/ f1 O: `# _7 L
8 m% [  j8 Q4 i' G: q& N9 L: e
2 c2 `& @- `. ^9 ~- d
: E1 E2 n5 ^0 y$ k
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了