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:223 p7 j- o$ d5 R0 {; n& S0 W* M; w- u
最近楼主一直在分享vue的开发，这块的开发是针对TC的那个AWC嘛，还是其他的什么* r0 ^! A1 A8 r' [& Y# N7 Q
另外咱们平台对代码性质的 ...

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

PLM之家PLMHome-工业软件践行者

热图推荐

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

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

全部回复2

发表回复