首页 > 编程知识 正文

vue 实现添加标签删除标签

时间:2023-05-06 08:17:29 阅读:230445 作者:448

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue学习 语法demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app"> <input type="text" v-model="txt" /><input type="button" value="添加" @click="addTag()">{{error}} <ol v-for="(item,index) in arr"> <li @click="removeTag(index)">{{item.tag}}</li> </ol></div><script src="vue.js" type="text/javascript"></script><script type="text/javascript"> var app = new Vue({ el: '#app', data: { txt:"", arr:[], error:"" }, watch:{ }, methods:{ addTag:function(){ if(this.in_array(this.txt,this.arr)){ this.error="标签已经存在!"; }else{ this.arr.push({"tag":this.txt}); } }, removeTag:function(index){ this.arr.splice(index,1); }, in_array:function(search,array){ for(var i in array){ if(array[i].tag==search){ return true; } } return false; } } });</script></body></html>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。