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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

" f+ w4 r4 y) {9 R+ K4 ~' f# ]% ]2 l/ i6 B. e; e# \& P! J
* @! ~# E8 I3 @1 P

- H; V* }/ l' f  r) s4 A" H<template>9 Q" T  R9 [  `& f' \0 G3 ~7 a' D
  <div id="App">
5 P' S: H% g0 l    <input v-model="inputValue" />
( A, z' p1 d. V! I# ~% k    <button @click="submit">Submit</button>
1 n5 x, K; }2 @8 L    <ul>, F4 X4 r8 f# M; v2 x/ u
      <todoItem
9 }, c" l7 N0 n; O. I        v-for="(item,index) in List"
$ ?0 s' j% E. x( n* }        :key="index"
- i# V: d- _+ s        :content="item"5 D  s1 ~3 \$ F  Z" \+ E
        :index="index"
" s& R" A- O  i$ W# K        @delete="handleDelete"
/ F+ e+ [, K/ f( D3 M      ></todoItem>
. E! ]* y9 o6 W    </ul>
1 i. ], t0 C/ ]  </div>
6 F7 A2 V' a" @6 d5 V# p</template>
8 i. I+ F! O  ^. q; K9 J! [. |; E% n! J  v3 ]2 a
<script>9 E5 c1 ^( p7 c; [$ [& z; T0 H
import todoItem from "@/components/item.vue";
( \: ]: z5 u7 |& a4 d' t# ]
0 s- u- v' J: J8 T' V$ pexport default {# h& l0 J/ d9 ?# F7 G
  data: function() {$ j5 f) J9 Z& G* p! v
    return {) J# N" l: ~) t8 G0 ~
      List: [],6 r, c  z9 d$ y$ w; ~
      inputValue: ""
) Q4 b8 |. w/ p9 O# K4 p- k    };
+ o( |* c8 H% @) o" @  },* M4 J7 Y$ W! l* C
  components: {
* t4 Q; V% x5 T( w1 B2 f( F    todoItem8 y7 w* R1 V6 u0 M
  },
5 N# E1 v1 H: J8 u8 o. o+ ^, C  methods: {& g! c  E# n+ g. v$ l' p: w
    submit: function() {  @; Z) N- U* S6 c! _: n; E
      if (this.inputValue != "") {
8 v7 D+ p9 u$ d" I        this.List.push(this.inputValue);
0 k) _5 j8 T0 D' H) ~4 N6 M5 @% \      }
, D( r; Y* K2 ~+ _- V      this.inputValue = "";
* d1 |& F- a4 l    },
. o; C3 f2 l( }5 S    handleDelete: function(index) {; s' {. Z4 u# l. Y& `0 ^
      this.List.splice(index, 1);$ G: y, i( V! ~% I) z- d7 S
    }4 N- w5 w5 J, V
  }- y( r' w3 i# N' d: v8 \& H5 a
};9 i% E9 V/ {3 T: d3 E( J$ O
</script>9 f* L3 S6 \# [7 ]$ Q
; O& D$ j3 H2 @
4 c( N5 k- f4 o6 [8 D
% l( p* C2 e( ~$ T  Y9 W+ {
. `/ g: ~( f( r9 g0 }) q% P8 @; ?

1 f4 d( @  ~; U$ [, j4 D) U1 [5 R2 C- F9 m6 C! d; W
0 F9 F$ }3 W/ z: A9 }
<template>
" \0 s* B) ~* O: _+ ~; P6 y  <li @click="deleteItem">{{content}}</li>
. `& R  Q# N9 K7 O</template>, d- \* A) ]2 X+ [  K
2 d1 K) v! z) @$ P6 C! E4 v
<script>, Q5 e( A# C# ~7 [0 }: \3 }( U+ {
export default {, E& N$ h# ^/ ?! N
  props: ["content", "index"],
# g5 i4 ]* \/ ^7 @. L& [  data: function() {6 L# k) G: {5 j# Z/ Q8 H+ R
    return {};
& a, h5 W7 X  t; K8 W, v: k  },
9 v! Y. L7 U$ B5 L2 t  methods: {
. [: s. O6 t/ p5 b9 w; R3 w    deleteItem: function() {. _( n* O1 D) [8 t; S" A* B. c( m
      this.$emit("delete", this.index);
! m; @/ x) z  _5 U# P1 b    }+ e! R% d4 C) d1 n  `2 V9 x
  }# x" |$ c; |3 q. W/ F
};
$ r6 O: L5 p& o/ m* P9 A</script>% E8 T! Q/ A, l, z; C6 @
# a# @5 f; y' H* t" i/ _& R
( n% y8 w9 |5 q  \% c, d

+ Q: n& I9 ^5 ?+ m( A) z

/ o; ]0 J+ ~: V* Z; [1 f
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了