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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

1 ]* ~' g/ r! R' u; [  m
; V3 I5 a  G, F  F1 }4 r+ f1 [4 K, `0 R( ?
3 A( [  o! A0 w! i) {7 D
<template>
7 U. p2 |+ n1 [3 m4 X; T  <div id="App">- ~. R! ?$ g# }# u* w) ?: Z
    <input v-model="inputValue" />
. {9 i. `) \7 L    <button @click="submit">Submit</button>
( z& ?  T" [' j$ I' g& n    <ul>9 W2 [2 R) p% Y1 X. \4 t; ~" d# i* p
      <todoItem) o' }7 q8 D; T& T
        v-for="(item,index) in List"
4 p0 w! g2 g  V0 @' ?" z        :key="index"
, C6 v3 E+ k* ]- d- U1 t- _        :content="item"% l" }  b. @2 E, }/ Z
        :index="index"
5 e7 W* O8 `7 I. u        @delete="handleDelete"
0 k; T2 r5 G8 q3 }) |+ T0 \      ></todoItem>; p1 u+ h- D9 j6 J+ y. J
    </ul>
' s0 ]" b$ m! n3 O  </div>7 K" A/ h7 A0 R" F* N, h: A" s! _
</template>
* W! e& \) ?  k8 a- `0 A, O7 k
; ~# n6 H. D  w. o0 F! p<script>1 N9 d# \3 `1 X$ j% S
import todoItem from "@/components/item.vue";
2 w+ q  ~5 K/ ]  k/ s7 V4 N6 S! ?
6 B0 t! T+ R( O) B. Dexport default {% r4 o+ k7 I8 A" P9 t& {+ n
  data: function() {
# n% M* J. _. t) _" L) ^    return {
7 j& D6 p( z. K6 z      List: [],
  N4 v! T$ m/ I( W( ^: a      inputValue: "") k# F( s3 M0 ?0 E4 L7 V2 B: l; Z' O
    };5 e6 e9 z* e+ [' ]4 `" U" \+ ^
  },2 K% b" Y$ z* N2 q0 c( q$ U
  components: {
( A5 o/ i2 i+ Q! X9 g    todoItem
% h6 T+ q" e& i8 _: \) \: h  },
$ ~0 R9 K0 T, H  methods: {$ W4 \( M8 V$ P2 V1 c* V! m
    submit: function() {
+ j  a/ j& v# d4 @      if (this.inputValue != "") {
1 z/ w, e8 x/ x        this.List.push(this.inputValue);
' ]& J. o( R7 b) S3 ?, Y      }
* x* {* I- Z4 B, s9 N& T' ]8 C      this.inputValue = "";+ s3 f) c/ ~- ^1 b) H+ y7 P; h5 _
    },
2 |7 t6 G$ e& S) x    handleDelete: function(index) {/ Q3 j0 N7 w" y. _+ S
      this.List.splice(index, 1);' P: W2 c3 i. r3 j
    }
1 m& ?  q! k- e# W7 Q  }
" h" @% E8 v9 x2 d1 H* n};
, N+ W3 @' n1 C- W# w! {$ m</script>
; H' U3 o# Y3 S* w+ [3 c# b% B* u1 q1 h$ B9 a

9 ~, f( q% u! [" p
$ g; Y/ U1 v  V1 {

! h& o/ w! h7 I
  i3 k: v+ T# m) q! C$ h* H3 q8 ~8 X3 b2 Z5 S. }$ j* h
. Z( V1 x9 `. h9 h0 ]. W  [3 v
<template>8 ]) o$ `1 Q& F, }2 d8 C# }
  <li @click="deleteItem">{{content}}</li>- l( c0 g, E9 b' B
</template>
8 g! N7 W' v; |" ]5 N
+ ~1 E6 X0 }2 ]; s<script>3 G4 d- k  N1 F" P3 i( v5 A7 c
export default {
% ?: h6 w# H5 [+ w( Q! C  props: ["content", "index"],
4 F' v+ p1 t% f: g  data: function() {
8 E& S. Y, o. G& t    return {};0 k7 N& i. k' k- B" {* y  C1 |& `
  }," N; m3 Q( z, y# c7 L7 Y8 d% h1 g0 B! g
  methods: {
" A6 r+ l' p# y6 V/ |7 P. ~( q& D4 B. z    deleteItem: function() {/ J  r8 E5 A1 t; `! ~" Z% K
      this.$emit("delete", this.index);) w6 v# [* i$ a6 `- `5 Y/ E  [# |  d
    }. `) l3 M! }2 d$ B4 ?6 b- r
  }
/ s' j6 [' R, L0 Y( ~* e};" g$ ?* ~  i1 \& g
</script>
) T. t, q" J4 w4 X. ~/ o- q2 U! Y% @; d0 h5 k

2 h2 J9 ^8 d( W$ h& L# P

7 d1 E' o' i. y) G1 O$ T8 k! H. ~

0 N% `8 i( t2 c: r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了