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

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

[复制链接]

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

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

admin 楼主

2019-8-8 17:24:11

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

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

x

( ~' e4 r( G$ L: Y
* U+ k0 p; g7 R. w6 f' K( O+ e5 s* f" H
$ ^) F0 e% i" b( d8 l5 S
<template>( {( Y2 z( |! ]- w. K5 ~; s
  <div id="App">5 j" w& O& I; m1 I% N2 z- M& o" P' _
    <input v-model="inputValue" />
& V! ]# ~1 d, |1 d8 t( X) Q    <button @click="submit">Submit</button>( X( d$ A. w$ c4 X( L( e6 I: \. Q" \* l
    <ul>
3 n/ u  Q5 Q' z# O, H      <todoItem. |2 }  ^& j+ e
        v-for="(item,index) in List"
7 h1 z* f* R6 {( o        :key="index"
) u; p! N& W6 Q. n# }5 h        :content="item"
# `* o: k3 L, ~        :index="index"5 D. ^1 l. I8 c' P4 o( [+ R6 Y
        @delete="handleDelete"
$ ^* y( p. K- W; A, F0 t. r7 [- j- W' g      ></todoItem>
) v( _. [$ Q, V9 h1 u    </ul>
' k3 I, D: X( X4 C) y, {  </div>1 c" R6 `' d2 x( J
</template># Z! ?" ^0 T7 U  B& f3 N

5 O- P9 x' c+ M) V<script>, R0 z) H" O4 g$ Z' F
import todoItem from "@/components/item.vue";
; E& G8 P5 a- R! A' q7 x" Y5 A5 a/ Q
export default {
* ~' d5 k  M$ B, ]  data: function() {
. {; v8 T7 ~& l! M" @    return {
2 f3 _  \! Q7 W- O1 r      List: [],
' G2 D$ F! e4 V" B5 i* l      inputValue: ""4 _" g$ G; t6 U  e5 S( A" _! v
    };" S1 R5 G' @; j
  },; A4 Z* H$ I  ^% Y
  components: {9 `* @. O  t  M! ]
    todoItem7 o1 D* W; J: T1 Z8 W2 y' _
  },
; @: k) ?( |" R* B# m  j9 d% Y  methods: {. d7 z  x. w/ X$ V
    submit: function() {
$ h$ Y* a  Q- }# L" h8 H4 z3 a, h5 P      if (this.inputValue != "") {
) i$ r( v- j# A) W0 Z        this.List.push(this.inputValue);
+ v5 B' c% m/ }7 J. k% d      }
& @' J1 z" V7 K) i, n      this.inputValue = "";- p: b5 v$ r, z
    },
& u! K+ N9 z) W6 w    handleDelete: function(index) {
7 N+ U8 U7 D: v: v3 K: U      this.List.splice(index, 1);
' U$ l( Z9 U' W' ^8 e/ k8 {- |1 M! ]    }% T6 D5 u* d$ j5 s
  }
- n! c+ d( e# N2 D/ R};3 n; O- I5 N+ X' @& \
</script>* l! i: C) Y$ N
& z  y" w" J' t( e# K6 }# p5 F

8 [1 ~, [6 a5 e# z* Q1 B

0 b7 |4 W5 l2 W" k* S9 x8 ?3 @; a, s* \  W' s$ t3 H7 U/ r. }

5 j6 f! K3 u. s! |; Z6 e! n
% \) n& x0 m. O+ {: F# }
7 b3 b. v8 `# @<template>1 w. G( r+ l  O  q) M3 D! g
  <li @click="deleteItem">{{content}}</li>
4 H' Q- a- Y3 g; ~</template>/ ~+ B) d4 L2 C7 z, x
, }8 G) _$ u$ c7 l; M- P4 a
<script>8 s* H9 f8 [1 |) |
export default {/ d- \  d/ s/ [
  props: ["content", "index"],
' n$ I/ C, }* X6 q" u  data: function() {
6 Y8 _' I& B/ n! ^    return {};
' P7 J8 N4 Q) I/ K  },
* }$ k) q& V! [6 ~2 c  methods: {; N9 h, D* l& s8 b4 L; B
    deleteItem: function() {
# J- f: ?* j) I9 C      this.$emit("delete", this.index);
+ G( R6 m2 a* K4 q    }
" E& Z! T9 ~3 W% I8 F  ~  }4 x6 |" @. g( ]5 x) }
};$ H; o( Y! {( W6 t
</script>2 [( z) s% b' U7 n8 v& r

: G  o  D2 k- K, n& G$ u
  Q4 N' Y, X2 v6 S+ ^4 ^" f
" S* _& R# ?- q) r1 R2 k1 o2 s
3 l9 F( |6 C2 [! {5 {- 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二次开发专题模块培训报名开始啦

    我知道了