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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

& D9 x; C' H  E. t9 Y; m. P
  Y) q" V) c$ I- r$ X6 `6 j  E4 v' r8 R& R7 D* C& U

! K2 x( E2 Y1 G<template>
/ X6 M+ j. |0 P; \  <div id="App">
# S4 O+ c% m: P$ v1 M4 q' g. J    <input v-model="inputValue" />
) Q+ s" q8 b0 m1 Z9 m0 a    <button @click="submit">Submit</button>
) P$ L6 D' Y) j' I1 y6 v    <ul>- V: I$ ]8 @, d) M
      <todoItem; T5 @8 m0 W+ W& u' ^- p
        v-for="(item,index) in List"& t2 t; U8 l7 j; Q$ p& {3 }) h
        :key="index"
) p9 [8 V* T/ Q        :content="item". [: I4 \8 \1 p" q7 i: }
        :index="index"
6 U/ o% P- N: e! H        @delete="handleDelete"
# i0 ]/ x) x5 l      ></todoItem>+ Y0 n+ b% e. I$ \7 ?
    </ul>
# v1 ~5 ]3 a6 x6 Y  </div>' g2 a9 X3 R. V& g
</template>
/ n7 F6 T9 J+ P
( W7 A# o& t& S3 X" R. T<script>
0 V& j$ u1 O3 U2 C, Eimport todoItem from "@/components/item.vue";& b/ m. m' J* x* G' H

: M: W& H. j+ R+ a9 G- ?1 Z, k3 ^export default {* p# r5 @) p( {/ n% d; _9 R$ d% s
  data: function() {
, \! o+ _9 V2 g2 d4 T' v+ h; w) D    return {$ l) K7 s% d2 H$ z! P
      List: [],/ v2 @4 X/ @) i' l- F7 [
      inputValue: ""
: V! `  g5 T# T$ U' x    };
! D) ~, ?+ ]- T; Q  },
1 G' O! A! a: `, l3 ^  components: {! `% c7 v# ?& ^- ]3 N. a2 P
    todoItem
/ a) |" f2 i. m! t/ d' r" U' K  },
4 r; L4 s% }% \; w  methods: {
4 _# b+ c' U" ?: v    submit: function() {
% o* q* J" ~# l      if (this.inputValue != "") {* N5 h9 A" R: N! o  A( y
        this.List.push(this.inputValue);/ @- L- C3 P+ p# p. K5 k3 g' l9 r
      }
) D. X4 A* s' W, T2 o% v      this.inputValue = "";8 f# ^9 c1 B- Q/ S8 L1 `$ S
    },' ]% k1 I" I- n& D  I
    handleDelete: function(index) {
, r( {0 o. b5 s/ I! s: f      this.List.splice(index, 1);
  B/ ]1 K) F3 u: s6 ]0 \% c    }
$ A5 y8 A7 V2 q! e, l% j  }! D  d5 d: t% a
};
% j5 X! g) v- k8 B/ |% {0 u8 P</script>5 {, ?' t" x; n$ H- e

/ L6 ]1 u% a, g" Z- f8 n
/ a5 Q# y8 ]( L" I/ m

9 L! D! t/ \" ~1 t, T& L# C" [
) J2 ?3 @& o" W9 e7 S* {& V& b7 ]+ X" \
, x4 v2 l3 Q; F+ x
$ \( _" G! }4 l) s, \+ k, O. W: ?
<template>
! l! `& j% n: }/ R4 @: [  <li @click="deleteItem">{{content}}</li>
+ Y, g# I- h; x- i0 n) v+ ~</template>; I! `, ?, b, p0 @+ V( r! Y0 O1 ^
3 V, w. j9 G, S8 t5 \2 m; t, s& e
<script>
+ m, ?2 ^- e5 f4 T( vexport default {
3 e1 a& m, n$ v: ^' P' q  props: ["content", "index"],
( Y1 b7 {: T1 P! ?  data: function() {
7 j0 k' u. y; z6 F  K0 H    return {};
4 N# u* S, T: ?. z: r  ?6 k  },
3 r8 _5 j; C( s# Z3 j  methods: {
$ ^. z. B% u9 f4 {. d% }    deleteItem: function() {
5 \; {1 ?0 x6 }  k      this.$emit("delete", this.index);
% N0 J6 p2 D: T  R    }4 S$ Y" Y# ?2 `
  }
! w; p& h% f% b' l. \, ]/ H};
! T/ q7 t3 E* h9 ?4 V  o# }( U</script>5 z$ T/ n1 R% q4 o

. a: `) j  }* e1 g0 m: z3 m; a5 }4 K2 U3 `! M

0 M/ c! }  ^- e: U: ]7 y
" g0 o; c  U% \$ [* q& D/ e+ E
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了