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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
& Y# d3 I' L' G6 b- W% `$ J
' i& C$ J. v" q7 _+ j+ {; z
1 t' ^; t; }+ T
% @! ~% [2 W5 {
<template>; H, V% X# E3 c. s! l
  <div id="App">! u' k8 y/ |) [& v4 H1 Q7 r
    <input v-model="inputValue" />4 E  `0 _/ ?# R' g+ c
    <button @click="submit">Submit</button>% B' _& y% N' p! n! d2 }
    <ul>! a/ z7 M5 q5 {$ N7 j% W9 Z. c
      <todoItem
4 o- ?* a" I* S/ V        v-for="(item,index) in List"
) x9 q2 `, ^  [- l        :key="index". }- f  \# Z8 z  z
        :content="item"1 C! v% p- q+ n* H8 x0 c: }- {1 D
        :index="index"
+ j* N" q+ y  |        @delete="handleDelete"
& K; d- n1 b' H/ i7 I, T      ></todoItem>
( W3 v3 s3 E9 ]4 H    </ul>
) {+ a9 G2 |; d9 l$ P( Z  </div>" d- l& S* L7 K5 E
</template>
" Z2 L' ?0 s9 l4 E5 j' O
+ Z# P) [6 q1 I* @. R1 o  A# n* v<script>
% P) k! I4 L# ~" h8 E7 n9 dimport todoItem from "@/components/item.vue";
: X) V5 P5 O# u: t- O- ?, j  F
6 v. A  x/ O, H1 B- gexport default {% Y/ Y* G0 V( r1 E4 `& |! W+ `
  data: function() {. e! T9 p, a: w+ e
    return {
( l' Z( T' _' b0 J6 ]8 K, `8 s      List: [],  \4 Z! `6 V7 m1 Z6 t+ A" g
      inputValue: ""2 P" {4 d* y) m9 X$ W: i
    };
# k# ~0 W. Q, F' u7 a$ e  },  d" H+ V. g! A
  components: {
. V7 a6 A1 U& |; T% i+ ~# T. B    todoItem
# `3 d1 F/ H3 v" u  },3 V# ^0 t. [; ]( J6 c, a
  methods: {
# j0 e# L* h. o; z    submit: function() {& {; N& W% T) x4 J
      if (this.inputValue != "") {2 L, e0 ]$ B$ j1 i6 j2 }
        this.List.push(this.inputValue);9 X8 k" |: ]2 Z7 |# N
      }
. s3 ^+ B8 Z4 l      this.inputValue = "";
" _9 x* I% c! z( g+ U7 b4 F    },
& b  {% B8 S1 ?    handleDelete: function(index) {
! {' c* N4 }2 E- U      this.List.splice(index, 1);$ f, J; K! a: y2 b7 r
    }$ B, f' t8 L0 b+ x; O1 g; L
  }
7 O4 ^" O- m9 E- g0 F1 d: b) Y0 Y};
! r* W8 R, B; h5 u</script>
" F0 _! P* ]1 y+ b$ b$ h) b4 L3 p' g
, F0 l  N7 \) O" ]- c5 @) s
' ?. n0 q9 F9 e
* m+ ?' Z4 V" |$ {, k# w! y" W9 ]

) w. K8 z% q' |" K# w  y* @' v- }' g5 w5 @$ p
* s. }; R5 Y* u# K  K; |

5 Q8 _0 W5 L+ j  t- N, a$ K<template>
- t' ?0 F' X- @- m  D% H  <li @click="deleteItem">{{content}}</li>3 r0 j! W8 Q- F7 N3 W- F8 u$ b
</template>
  y/ h* y% A) H2 a4 j! M6 O; ^* J- G+ |$ c
<script>
, ]# c$ \+ R1 e3 [* Q! l4 i% Dexport default {
- Q: C. r" {4 M% k% J6 X  props: ["content", "index"],% g' u: u, N; q. y6 E( ~) z
  data: function() {- F8 K! [$ a& Q: }& \- b
    return {};
9 a$ q+ ?! R; K9 Z  },
5 }& f* |" a1 I* n2 H' I+ d# h  methods: {3 L, S6 N! }# b/ M% b3 i
    deleteItem: function() {) [' G1 ]- Q! ~# _# k- ?
      this.$emit("delete", this.index);1 |) @% P/ p: Q5 g- z) s
    }
" ~5 K' z% u! s+ F0 w  }
, r6 i  |/ o. e};
0 T( Q7 s; x5 o' M' }" k% t</script>9 H& r) a# I  @
4 v1 P, R( H* [8 @0 u$ t0 `
7 ]+ h3 [* O! D9 @+ v7 u" e' g0 s
5 z0 C! n4 u, e  t" s

$ W) T3 _+ ?. t' L
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了