Vue js实例，简单的ToDoList 实现

admin · 发表于 2019-8-7 18:10:37

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

您需要登录才可以下载或查看，没有帐号？注册

x

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>to Do list</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
      <input type="text" v-model="inputVaule" />
      <button @click="Submit">Submit</button>
      <ul>
         <todo-item v-for="(item,index) in List"
         :key="index"
         :content="item"
         :index="index"
         @delete="handleDelete"
         >
         </todo-item>
      </ul>
</div>
<script>
      Vue.component('todo-item', {
         props: ['content','index'],
         template: '<li @click="deleteRow">{{content}}</li>',
         methods: {
            deleteRow:function(){
               this.$emit('delete',this.index);
            }
         }
      })
      new Vue({
         el: '#root',
         data: {
            inputVaule: '',
            List: []
         },
         methods: {
            Submit: function () {
                  if (this.inputVaule != '') {
                     this.List.push(this.inputVaule);
                  }
                  this.inputVaule = '';
            },
            handleDelete: function(index) {
                  this.List.splice(index,1);
            }
         }
      })
</script>
</body>
</html>

Frank · 发表于 2019-8-10 09:22:12

最近楼主一直在分享vue的开发，这块的开发是针对TC的那个AWC嘛，还是其他的什么
另外咱们平台对代码性质的这些分享，能像一些其他的技术平台一样，把展示效果做的好一些不，这样增强可读性

admin · 发表于 2019-9-1 18:31:50

Frank 发表于 2019-8-10 09:22
- G' m$ |2 X; M# i6 s9 _# Y最近楼主一直在分享vue的开发，这块的开发是针对TC的那个AWC嘛，还是其他的什么9 Y7 E( S- y; y. y k4 |
另外咱们平台对代码性质的 ...

web 开发前端框架，以后着重于互联网方面了

用户组 :	管理员
邮箱 :	xduniverse@qq.com
手机 :	VIP用户可查看[申请]
Q Q :
性别 :	就不告诉你
主页 :	http://www.plmhome.com
个人介绍 :	原西门子NX高级教务员，10多年NX培训，开发咨询，Teamcenter培训实施等

PLM之家PLMHome

[前端框架] Vue js实例，简单的ToDoList 实现

admin 楼主

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

全部回复2

Frank 沙发

admin 板凳

发表回复

admin
关注TA

图文推荐

Tecnomatix 二次开发

Tecnomatix 二次开发

Tecnomatix 二次开发

Tecnomatix 二次开发

官方文档，NX12 使用

站长推荐 /1

PLM之家PLMHome

[前端框架] Vue js实例，简单的ToDoList 实现

admin 楼主

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

全部回复2

Frank 沙发

admin 板凳

发表回复

admin 关注TA

图文推荐

Tecnomatix 二次开发

Tecnomatix 二次开发

Tecnomatix 二次开发

Tecnomatix 二次开发

官方文档，NX12 使用

站长推荐 /1

admin
关注TA