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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

1 S, N* l) X/ Z: |5 t6 U1 b7 E3 P
) N1 l# m1 l4 h$ ^" }
# P. i" U% K  S# q4 E
<template>; p- w  T8 N9 T2 H, U% I
  <div id="App">
: F. `' P) W# {8 r* ?4 F. ]& N3 a    <input v-model="inputValue" />1 W: w. [' `' G5 \7 {
    <button @click="submit">Submit</button>. ?1 B$ S2 S0 ]% N, Z
    <ul>: Z7 W9 d- R& s& R: i* H$ u
      <todoItem
3 e# @7 s, b+ N# D9 p        v-for="(item,index) in List"3 F$ x; c7 d* X
        :key="index"
$ [9 Z0 O# S1 e. {) S        :content="item"# N' ]- z% ^( y% X
        :index="index"9 N' n$ ^" u5 _
        @delete="handleDelete"
8 F4 v% h; _5 ?2 n: o6 A      ></todoItem>. t4 e8 r4 A3 R# j; L
    </ul>
2 q+ z8 X2 E1 E$ V  f  </div>+ L' ]5 M9 E# f$ [
</template>
- k' n: Y+ X2 R( J8 q) [
8 l  o3 H( G# }<script>' `6 F& u/ m, h( C9 @5 |6 ^5 |
import todoItem from "@/components/item.vue";
# T; u# l. Q. @5 F+ U( N, Z4 \0 q0 J, i9 Y- R6 @$ _
export default {
5 O3 c% ]0 k# u3 X, V  data: function() {
* r" P. t# N$ x6 q: p1 d- r    return {
5 ^) v0 a! @# A% U8 J      List: [],
" ]1 g1 l% ^: R% {9 g6 b6 l      inputValue: ""
5 H; V7 i2 C/ C4 @" {$ @! e, j# j    };
5 |( o& |4 L( V# o' t  },' h, w- d  X6 [$ M8 }
  components: {
$ C) l( S! T9 D6 E$ W    todoItem$ w0 H$ J& d( g( E: X# h
  }," o  o; Q1 c" @; l' B: s9 ~8 B
  methods: {8 Y/ D) n9 q. r; u+ t
    submit: function() {
& ]) g, c8 h$ f& P  Q      if (this.inputValue != "") {
4 ~2 C  J, Q* v0 M0 r5 u        this.List.push(this.inputValue);2 l: E% n. f* t+ Z* X% Y
      }. L# U: E) V, H$ P. U
      this.inputValue = "";& A9 r2 r: O, Y% _8 m# q& Y
    },
; u4 U, d2 s1 p    handleDelete: function(index) {
1 U( D3 e3 e% y( j% r7 M      this.List.splice(index, 1);
( X- u8 b; B0 F* {    }
1 c; v5 ]4 \- T/ S/ w5 X* u  }
- f# A4 I2 B% X$ w( i7 \+ N4 ]};
1 E5 d( q( P" F# k# K$ e% B</script>/ }- c- o' z) P2 P5 p5 ?

" \2 P- M7 Q( Z* j$ i# m& E  n- W, v8 G6 y0 j+ ]/ G: m) p, Q

7 I* o% `3 }3 p# }- E: z
& \- N. n! t1 A/ i# ^% D9 _* W4 `% t
) P* [6 N# k- R5 s/ y
# |% [! ~8 A; w- f
7 O; F% f  S* z* c2 I; \<template>9 B  y$ W0 x- \/ N* t- k1 s8 S& m
  <li @click="deleteItem">{{content}}</li>! v% e, G, |" v4 I7 x6 l
</template>" S! E5 k! A; U) Q* R2 ]) F

* X0 D1 w8 X" p- l$ \; I" S<script>
3 P3 F# J6 X8 J1 V( d; zexport default {
( L! \, n7 |! O" B% H5 u9 e  props: ["content", "index"],
8 v0 O2 N+ H8 j8 b& z0 b  data: function() {
5 a+ Q6 q# D/ P    return {};
0 |9 t* y- J' V+ G  },
7 T5 z( _4 [) X2 ]! e4 L! {  methods: {
$ X( z$ L4 @) B    deleteItem: function() {/ ?' `' _; F( W% W! @
      this.$emit("delete", this.index);
! r/ [, P" `+ h  {4 Y    }
! ^0 e* Y: l8 k" c( q  }
; C+ b; y% V7 b/ W/ o2 {};+ `' u& |1 d! j1 H  e! M; o+ ]) w1 d
</script>
. q. X; S+ v1 a$ i; `8 A* ~$ [2 d
" D7 f% j, C! j2 w
$ g4 Y' u6 y8 t# j0 W: w- }

( F2 O  J, K) ^7 ^4 B
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了