VUE（删除功能）

最新推荐文章于 2024-06-08 19:08:56 发布

小青龙8085

最新推荐文章于 2024-06-08 19:08:56 发布

阅读量996

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/102840426

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

点击提交可增加li，点击li可删除当前li

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="./vue.js"></script>
   </head>
   <body>
       <div id="root">
           <input v-model="inputValue" />
           <button @click="change">提交</button>
           <ul>
               <todo-item v-for="(item,index) of list":key="index" :content="item" :index="index"
               @delete="handleDelete">
               </todo-item> 
               
           </ul>
           <zujian></zujian>
       </div>
       <script>
           Vue.component('todo-item',{ //定义名为todo-list的全局组件
               props:['content','index'],
               template:'<li @click="handleClick">{{content}}{{index}}</li>',
               methods:{ //组件也是实例
                   handleClick:function(){
                       this.$emit('delete',this.index) //点击item之后触发emit事件里面的delete事件值为index，
                   }
               }
           })

           var zujian={ //定义名为zujian的局部组件，并且必须在new Vue里面声明（28行）。
               template:'<div>这是局部组件</div>'
           }
           new Vue({
               el:"#root",
               components:{
                   'zujian':zujian
               },
               data:{
                   inputValue:'',
                   list:[]
               },
           methods:{
               change:function(){
                   this.list.push(this.inputValue);
                   this.inputValue='' //将"input”放入list里面之后将其初始为空
               },
               handleDelete:function(index){
                   this.list.splice(index,1)
               }
           }
           })
       </script>
   </body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE（删除功能）

点击提交可增加li，点击li可删除当前li<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script...
复制链接

扫一扫

专栏目录