vue练习7-2

最新推荐文章于 2024-07-03 23:36:40 发布

jamesge2010

最新推荐文章于 2024-07-03 23:36:40 发布

阅读量205

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/jamesge2010/article/details/84107712

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件元素删除</title>


<script src="js/vue.min.js"></script>
</head>
<body>
   <div id="root">
       <div>
           <input v-model="inputValue">
           <button @click="handleSubmit">提交</button>
       </div>
       <ul>
           
           <todo-item v-for="(item,index) of list" :key="index" :content="item"
           :index="index" @delete="handleDelete"></todo-item>
       </ul>
   </div>


   <script type="text/javascript">
       // 全局组件
       Vue.component('todo-item', {
           // template: '<li>item</li>'
           props:['content'],
           template:'<li @click="handleClick">{{content}}</li>',
           methods:{
               handleClick:function() {
                   // $emit触发事件，名称为delete
                   this.$emit("delete", this.index);
               }
           }
       })

       // 局部组件
       /*var TodoItem = {
           template:'<li>item</li>'
       }*/


       new Vue({
           el: "#root",
           /*components:{
               'todo-item':TodoItem
           },*/
           data:{
               inputValue:"",
               list:[]
           },
           methods:{
               handleSubmit:function() {
                   this.list.push(this.inputValue);
                   this.inputValue = "";
               },
               handleDelete:function(index) {
                   this.list.splice(index,1);
               }
           }
       })
   </script>
</body>
</html>