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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

$ p( I  B; c- W9 C1 |8 s+ X1 T: Z
1 _' S3 N) ]5 x: H+ ^3 G7 a: p  |; ^

6 t4 d' A& [9 S( Z* X, v& F<template>
  Y* n1 c& i, `9 L  <div id="App">
% B' J! P6 s4 j    <input v-model="inputValue" />
+ r! z' P7 i" u    <button @click="submit">Submit</button>
: ]; o, v8 D# ^" I' P  @' A+ G, ?    <ul>
* J" ~+ Z7 @7 ]* D! {( k  H      <todoItem0 o, Z8 E0 z. r$ g% C
        v-for="(item,index) in List"- z; x0 ]3 f- u. w; a
        :key="index"% {& ]5 o4 d/ N4 \3 V! i8 ~
        :content="item"+ a$ R* d) o! j( _
        :index="index"
. T  k5 Z/ ?( v) d        @delete="handleDelete"
( F" A0 H- |5 k, T* H/ D9 v/ F      ></todoItem>. h% N' C  q' V: M# K
    </ul>/ w# P. P* p5 q2 h3 n: [3 b
  </div>
/ w' L) d' q/ x$ f+ y2 W; ^8 x</template>0 v% q& i7 ~5 f6 E- Y. @/ r0 }5 [

7 P1 s( Y3 y& e2 w( O+ k; i- C  V<script>
! m' E/ ~+ c/ r& d7 i& ximport todoItem from "@/components/item.vue";
! s# J% Y9 J8 o0 \; N9 P5 s- K/ x' @
8 n' @5 [: `' c" a5 x2 P2 Rexport default {% G4 P+ U* T( L5 ^! s2 Q* |3 y8 f
  data: function() {
( o( a9 O( w. E0 r7 K3 ]9 r    return {
/ D7 M# Y, G/ o' e( ?3 a      List: [],
$ R4 F' z" B2 l6 g: m# ~      inputValue: ""- ^* K. z' I: F( c8 r/ p; Y3 @5 O0 N
    };
+ q1 r. Q* N% K- t' f* }; h  },
3 G6 j+ {6 j/ ^9 a' M8 o# E) p$ [  components: {5 C0 |7 X) v7 @4 O* c7 P, h% @
    todoItem
) b7 x( a' `/ P0 _, u9 d- ]  },
1 Z6 r2 L5 z4 D. ~/ F1 y2 a5 ]  o  methods: {
' ^$ A' d& l' M+ f% u, J% A; E    submit: function() {# j) j( x3 q" D2 Z' {* u" L
      if (this.inputValue != "") {
: r9 e+ l2 f& l" i; W6 _3 p, K        this.List.push(this.inputValue);
1 v* P( i9 n. p. j  l4 F      }3 g( Y% O( Y% O, a6 P
      this.inputValue = "";
3 b3 M. {8 ?& a' K4 c: O# ]0 d    }," i# [# \) i1 y" D- V1 G
    handleDelete: function(index) {
9 Z; U5 {/ \$ k. n) g      this.List.splice(index, 1);& Q: V7 S; }# I9 x4 `
    }
" \% X# W% A/ D4 o  |+ w4 }  }
# q- Z: {7 e) H- o: l1 e/ I' ^( R};* Y, O, |% ~" c3 O
</script>
! E# K, t. b5 e. ?, M6 q4 ^; n& t- R$ `$ `+ z5 r3 z
) `6 m" x  c8 M% I' i
& ?; S, A5 l7 G0 ^9 n+ Q

( {+ G& k6 b$ {/ O
) B, a4 ~/ l' e4 e- N
/ D+ }- C6 W$ P$ G! U. b; f' u' y# A; _! z; {
<template>5 |5 N  t. {5 `' `8 f
  <li @click="deleteItem">{{content}}</li>' T/ n8 r# }: N4 n7 g& _' u
</template>
0 C3 D' y3 z; x( D8 z1 U0 X; T2 Q
<script>) d3 q5 X! Z* k) a+ m
export default {
1 N' T# B: K# |9 `" i# Q: A) l0 _  props: ["content", "index"],* O) M/ F4 q! U( f, e
  data: function() {
! m- ~$ K& ^! d2 }5 p; A    return {};( s. ^6 T# m5 I5 b/ ?& n
  },$ W# j; M$ I6 b  {
  methods: {
' g9 o7 r4 y/ d% v; c7 o    deleteItem: function() {2 I6 v# t: {% J! @" D3 L1 x
      this.$emit("delete", this.index);
2 i( |( J! ~( ^! V$ ]    }
; @: J% |( Q& b, i/ ]0 U  }
: E/ b( y2 [# o, }; U  m+ E' [};
, F% p. n4 a' [5 w6 j4 `</script>$ s( H$ A5 u$ Q! W6 e

0 w( m6 c5 U7 n. u+ e- K
! j8 E  F2 q# g' L. F  Z# m

4 Y" a- z5 g+ Q( k! [* C! \

8 o  |7 Q, \' z  a3 T/ f
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了