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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

$ l! K$ k' V1 J7 ~1 x$ e0 ~$ y" \7 I" O: y) [: F9 H3 p
* x8 l) n2 C) W5 P* |) e/ t

3 c$ Z- z8 }' \: ?<template># ?6 i) Y, O) K5 y4 C) K
  <div id="App">9 m- ]+ |2 |5 X0 Q0 I/ Z
    <input v-model="inputValue" />7 m' N1 n5 k4 ]  ]2 J: {: k1 N
    <button @click="submit">Submit</button>; L' P- e( K" f2 Y
    <ul>4 j' T/ H6 ~: Y3 b
      <todoItem! S' P! Y  `$ u- C1 b. M+ {
        v-for="(item,index) in List"9 X! `$ d9 i- T+ o
        :key="index"7 c/ j/ U# h  D: u! A
        :content="item"1 u. R; N6 z1 }6 Y
        :index="index"; t, J/ b* O/ W, Y/ O% g
        @delete="handleDelete"0 Q5 q$ c; C4 y9 |7 g, ^0 D3 j  i" [
      ></todoItem>
( R9 c& l' q2 S% ?3 z    </ul>4 v/ a+ t) J% e* m
  </div>
$ A' z5 `/ y% Y6 {' A$ [4 u</template>
; i- y5 c9 q" I; Y- u: h! s, A' F3 P8 s, m4 v/ {/ }
<script>
* w5 S- y# B( j- Q: @* nimport todoItem from "@/components/item.vue";
. j9 p# J7 Q1 n
0 |' _/ C3 }- U1 N! s: P9 b9 Oexport default {* F( w+ A- n, m2 R" n$ z% [2 l
  data: function() {2 G0 W7 v2 ?9 o6 b3 L: ]9 \. I
    return {
6 d( l( S* G; L$ F8 V* Q      List: [],' t% f7 M, X( @
      inputValue: ""
" ^$ J5 }% s$ B0 U    };2 a2 X* i$ @: o( k; _9 Q7 R
  },8 s2 c  A% l! f2 E& ]( T
  components: {/ e7 H9 G/ U- ~) T8 R9 y
    todoItem4 g8 T7 t* |* e$ r# G1 K+ f
  },3 c+ @0 y6 Q3 z  I9 j+ U6 j
  methods: {' I0 s3 ]9 E/ W. r  |* J* O
    submit: function() {
$ w& Q$ ~$ c# o, F1 V1 r) X- j1 e5 |      if (this.inputValue != "") {# Q  a( W8 o0 [8 c$ K4 z6 E1 @
        this.List.push(this.inputValue);
2 [* w- I. `% o0 d      }
" G& @& F: O. l6 r5 p6 U      this.inputValue = "";- V  ~: T6 Q5 j5 |0 Z' A" T
    },
. S& |  n8 T- d) Q9 @& w$ W    handleDelete: function(index) {
' R& r1 t% _# a/ N/ o$ ]2 R      this.List.splice(index, 1);
! c0 o5 y' |* j! H5 a    }
6 V: w: P! i- z- o% w  }
8 Q- Z( k1 I- E& k) J};
/ p$ _6 G% P- r</script>
! Y  i9 n8 e& |; F: m) ~+ f9 {# G$ _- ~; f  s7 I5 q
5 v& _0 D% x9 z

9 y% ~/ O/ E  f! ?
6 e6 d3 X  G& F  D) l: t/ H. c( V5 O% r

2 j; q( K9 g5 i) ]1 N6 s6 K0 h) E9 G! e: |
<template>" X% ^% g# g/ g% B0 R1 O) t' z8 x
  <li @click="deleteItem">{{content}}</li>
( R/ m2 l/ l2 A: i- P2 t</template>  B6 _  {! B. N' x0 b! J3 g

& s3 I- x- {  L* F% Z! K<script>4 s! h7 E) m5 C$ A8 u8 @' O
export default {% z" c! J7 W7 @, `
  props: ["content", "index"],
8 ]" Q1 f' [: `0 h/ I: v; l  data: function() {
6 w$ w7 U! v$ F4 W3 {    return {};
+ m+ p/ f/ x( I, \" ~  },
6 h  o- u8 s% \/ U- d0 ]  methods: {  o* h, M. ^8 ^; R5 |6 _5 \' g2 T, t
    deleteItem: function() {) M% v8 Q" t2 `4 p( N
      this.$emit("delete", this.index);
/ j. F- @% b7 t1 Z5 e! N* ]1 b    }
( S& i* {/ b% D. }  }7 G$ m1 }' u& A4 F/ n" _- E
};7 i9 r# o% z) }' H" J- p! U- u
</script>
  v( r6 E4 f9 E2 [
1 `. ?% O: ^' _+ l
% |1 s- C& t1 [% y( X% Z3 W
8 F4 n. k! Z# X  x
4 q2 N- o; a) n. ]  y
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了