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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

7 A; {9 m% ~  W. N6 a5 j' {3 N7 V; u
* i# ~8 j( z: V0 o. _  R
. V' |1 ^9 b8 u; k0 s7 i( O: p" R3 k/ a+ v' j* s- D( E8 A
<template>9 n! Z+ O& E; h6 B- x. h! Z
  <div id="App">/ Q% ]! G3 G; D# @& L' s5 P
    <input v-model="inputValue" />
9 g  ?/ u9 `/ I    <button @click="submit">Submit</button>
) i& R! ^3 X; t8 [# J# C: Y$ ~% Q    <ul>
; @& k+ U) M  Z8 h* c6 X      <todoItem
: m6 I! a$ d% @& N' m1 g  g; V        v-for="(item,index) in List"
/ w( q% p8 W0 i: C8 x        :key="index"
" c6 y5 G  s$ G  S        :content="item"
/ x* D2 u2 i- [% Z$ H6 O$ `/ Y' o4 b        :index="index"
3 V8 k0 [! |  U' s, n        @delete="handleDelete"" w1 u# t. s  Q0 g7 U
      ></todoItem>( I, N" b; i& z# t! s8 o
    </ul>
" u7 Y; M  d2 X2 B6 {  </div>
! D5 ]6 ]4 ^( |  A$ @, R</template>
6 ?  F0 y: M9 a" Q; x. F7 f% f/ e4 x5 U
2 {1 g/ B; D- m- y% y8 e$ e<script>" y: Q9 u3 Q  L# k0 j
import todoItem from "@/components/item.vue";
5 W9 P  D* g$ b9 i2 E
- H' b' {  X0 O5 Jexport default {
7 _- O5 i& T7 N2 K  p  data: function() {
5 E( b% N! Q3 ?    return {6 }) s: y* J/ s+ i" o. r( g
      List: [],9 n3 p4 y+ k" ]* D5 H$ w
      inputValue: ""
4 T; W0 `$ `& O9 Z0 ^! E    };! h8 W* w3 \. _' Y5 L
  },8 Y& e: {0 q. H7 y$ q6 Q# F8 ^; ?
  components: {1 A7 U* R2 A) y- b( X
    todoItem
' \7 A; `, m- s- Y7 N0 @/ U6 W. \3 s  },* \9 `1 r# b) @4 Q  H) A4 i" s0 W
  methods: {
$ B: Z0 B0 Q$ z1 L+ _& ]    submit: function() {
( P: D' B% [3 G      if (this.inputValue != "") {
  i( u% @  N+ L9 b% z        this.List.push(this.inputValue);
! i6 P! ]" m+ b, J      }
  `/ j, Q( w' I) a' S      this.inputValue = "";
7 a. O0 e8 L  f6 G    },. f; }# q; z1 E. G' m/ n7 O
    handleDelete: function(index) {' R. p3 G! T0 U
      this.List.splice(index, 1);2 ~+ L4 A' ^" g1 }& `) Y  j
    }/ Z9 z- _& G! y/ v2 j. R: Q
  }
( b! C, Q# i0 e+ g};5 B1 W; K3 u1 m2 C5 Q0 d; @
</script>+ W, n+ P  m3 `* V2 \; J$ n. C  T

2 @- Z8 u% S4 N$ m+ f6 O# }' d1 j1 c% W4 S4 p5 k! m/ K

6 t3 C6 ], i2 H7 q% \$ V2 F+ ?* c  f9 f4 D& d% e
# O; F- }, A6 j/ e7 v5 Z/ I

+ l0 K) q) h: t1 y3 |- H% e) x' y  f; ]6 j
<template>
! Q! }5 q, H- ^$ x* i  <li @click="deleteItem">{{content}}</li>8 y+ d) r$ _2 X: L, v" P7 X3 Y* [4 q
</template>
( Q3 i$ [  W: u: U6 N0 g2 y5 V- D9 @6 F
<script>
9 {- _/ d: X# L7 J2 rexport default {
" Q; B9 @* l& r/ @: J- L  ~( ?- Z  props: ["content", "index"],. o! C9 \, d7 J2 ~  m" q
  data: function() {  a: c9 O9 @9 @) L- C: G
    return {};
/ |" a$ z8 d" C3 m, g7 @& c0 Y2 L" D  },
' [7 N/ p% v1 K' q. L1 M8 N2 f  methods: {7 ^, s8 b0 h9 T- G8 V. P4 c4 D
    deleteItem: function() {! }4 B. v. Z6 }8 n- U6 \2 s' J2 ?3 V: {
      this.$emit("delete", this.index);
: l5 K9 M4 k+ z2 G7 n' S8 Z    }
1 O" |7 Y; u  n* G- a  }8 J& [8 ~# q8 W  ^# v
};- N/ t0 ?7 A& E6 J% e4 B
</script>
& X* P' C3 b( G
5 [: v+ u" }4 Y5 s% q: D
' `* Y4 z8 \" Z' T+ T3 }
( {$ f; B) q5 Z4 y
+ Z. [& x: V; L+ U& o# P
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了