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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x
8 G0 T6 @5 g8 f- s2 I: u1 K" E

9 i) X8 z2 m/ J( S4 y# t6 H6 p
- j  D# b* L9 Z& C6 F" r( z% A# r! R, r
<template>
! S2 F- z& s( x1 q5 i# d& k  <div id="App">+ j0 p, ]; X: y( h# K) H* Q
    <input v-model="inputValue" />5 B- A4 a6 S: k0 h5 I
    <button @click="submit">Submit</button>
- U( o9 `4 m2 D/ |+ x    <ul>
* x7 E: ?1 i8 G. D$ x  [      <todoItem
" B! Q" r7 j1 }2 W        v-for="(item,index) in List"
* X5 |( g8 I9 i$ R* P) v# [" D  S) N        :key="index"% O; Z' J; t- X7 \8 s  [
        :content="item"# O8 ~4 z+ B! }
        :index="index"0 }5 c0 Z( B! v
        @delete="handleDelete": t" J2 p; {4 M$ g3 z4 q
      ></todoItem># [! P4 F# t8 u1 I4 A
    </ul>% w, E; w  e$ f& o
  </div>
! v+ |, c7 T% S* R$ p3 m5 k! t</template>7 _! X- U0 E5 M# n4 E; q
# e* y/ c$ U  M: G
<script>4 i  S0 o0 @( w6 f
import todoItem from "@/components/item.vue";" F. u2 n& T/ Y8 @" B1 A
7 [# _5 r, g0 M* x  B4 Z
export default {
' Z) a& M' _9 N  data: function() {+ k/ U  t* Y* |  j$ E
    return {
* r$ D6 B+ J; }+ w3 ^& h  s. t      List: [],, N* M& X0 a- H0 f+ e8 I
      inputValue: ""
" M1 K( s8 ]  u5 k1 J( S2 I8 w    };
) Z; a5 Z, U- q+ ]5 C, x  },
: Y4 \- d/ r* O" z  components: {
2 L  ~2 E) `" `2 r1 A' X    todoItem
* t' R5 m7 B- p8 D1 r  },
6 x9 s0 d, g4 U( W% y( D& [, o  methods: {
7 s. h! K) n1 e; A: J+ p- D    submit: function() {
* ?3 P+ T0 m2 r! s) k      if (this.inputValue != "") {  w* g& a; X" ?" {9 T
        this.List.push(this.inputValue);
& V7 Z* |+ I1 y      }
% ]4 P& U0 ?% r: t7 P- [      this.inputValue = "";
( h* A+ [$ g# N0 f8 t, E    },8 _( [/ J! K2 h
    handleDelete: function(index) {, t' D, i/ J6 U9 ?+ j
      this.List.splice(index, 1);0 I" M( F, ^1 I8 ^, H- O
    }
3 F9 ]  P5 b3 B. M- R5 x5 q/ @  }
* {: h' M+ V$ g* Z# F* K% L* j};
) {: m& Q2 z$ g6 q9 h+ C</script>0 ~5 H+ s/ n* D2 C" F
; w2 p% V6 D$ j7 N& M
  l  J# p0 T  o5 g/ v

& c, I7 {3 c' W( U9 R! f- C. }2 p) L

' }" a# L, U( G5 p) \' }0 a
2 |" R& `( Y% i- L
) J7 e9 b6 g" ]; u0 S! o$ N9 E<template>! ]5 N/ z# m3 I: g' D  W9 P
  <li @click="deleteItem">{{content}}</li>
, g8 |/ E7 _* P* Q' p</template>
; o: J, [/ ]8 O$ T- |3 ^1 o7 {  c% ~7 @) C6 q
<script>7 j5 g) v$ Z, W& k
export default {2 }* r0 _, Q! |8 l
  props: ["content", "index"],
+ J  F7 a4 M0 ~8 J! h" ^; p0 `  data: function() {
& x. W) r1 A# z$ ~- D: x- X; x    return {};. ~3 ]+ X* V5 r* g+ c9 i
  },
) Y) }8 b. y" J/ @: \( D0 Q+ c  methods: {! \8 L. C, N* a' N% }
    deleteItem: function() {0 S/ j2 _; U: R! U
      this.$emit("delete", this.index);7 e' O! o) R% ?5 ~+ Z) Z
    }
  i( ?) |0 B6 ~  }
$ C( }$ V- S9 ^};
# h% v1 ]. k1 h# ]2 s: o</script>
& Z4 m5 ^1 ]$ y$ M. H3 ?
+ O4 k# g, C' n  |% Y: ^( N7 p0 C+ W7 O5 }& U
$ n: p( q6 X# Y. S

& Z1 ~) j" P+ d3 p9 N  `: I
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了