Tag模块数组indexOf,splice的使用方法
发布网友
发布时间：2天前
共1个回答
热心网友
时间：15小时前
indexOf()查找一个数值在不在当前数组中，若在就返回第一次该数值出现的索引，否则返回-1。arr.indexOf(2)//0arr.indexOf(3)//-1
splice：参数（开始项的下标，剪切长度，剪切以后最后一位开始添加数据）
Tags模块数组外部传来的tags数据Tags分为两种，未选中和已选中：
tags=[];,tags是一个数组，但是tags是一个字符串数组该如何表示？
tags:string[]=[];,tags是一个字符串数组，目前是一个空数组；
selectedTags:string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
tags是外部传来的数组：@Prop()tags:string[]=[];
因为tags是外部传来的数据，所以没有默认值。有可能给值，有可能是空的。@Prop()tags:string[]|undefined;
在外部准备赋值时<Tagstags=""/>,发现两个都是tags，有点重复了，所以把tags改成dataSource,代表意思就是一开始的数据源，外部输入的最开始的数据；
所以变成了，@Prop()dataSource:string[]|undefined;
外部就是
<Tags:data-source="tags"/>---------------------tags:['衣'，'食','住','行']在内部渲染tags：遍历datasource也就是tags里面的内容，并显示在{{tag}}里面，用v-for，就得加个key。<liv-for="tagindataSource"：key=“tag”>{{tag}}</li>
这样tags的内容“衣食住行”就会显示在页面上。
已选中的数据selectedTags:string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
点击哪个就是选中哪个；在li上添加一个click；
`<liv-for="tagindataSource"：key=“tag”@click="select(tag)">{{tag}}</li>`select如何实现？给select一个tag，就把这个tag放到专门存放已选中的的数组里。
select(tag；string){this.selectedTags.push(tag)//把这个tag放到selectedTags里面。}在li里面，如果tag在selectedTags里面，那么这个tag就是被选中的；:class={selected:selectedTags.indexOf(tag)>=0}
在CSS里面给selected加样式，则选中时，就会体现那个样式。&.selected{background:darken($bg,50%);}
再次点击时，就取消选中该如何表达？
先绑定一个点击事件；<button@click="create">新增标签</button>
create,如何创建呢，在ts内声明方法；
create(){constname=window.prompt(message:'请输入标签名')；}创建之后，把他放到datasource里面
create(){constname=window.prompt('请输入标签名');if(name===''){window.alert('标签名不能为空');}elseif(this.dataSource){//如果这个datasource存在；this.$emit('update:dataSource',[...this.dataSource,name]);}}解析：如果标签名不为空，就像外部发送一个更新datasource的请求，并在datasource后面，添加新增的name。
在tags上加一个.sync，就会把传的这个数组[...this.dataSource,name]，赋值给datasource。<Tags:data-source.sync="tags/>
如果点击时，tag在里面，那么就删掉，就是回到未选中的状态；
如果tag不在里面就是添加到已选中的数组里。
constindex=this.selectedTags.indexOf(tag);//查找this.selectedTags是否有tag，若无,index=-1，若有,index>0。if(index>=0){this.selectedTags.splice(index,1);//从index的位置开始剪切，剪切1个；意思就是把这个删除,从已选中的数组中拿出去。}else{this.selectedTags.push(tag);//如果tag里面没有的话，就把它放入已选中的数组里面里面；}新增标签当点击新增标签时，新添加标签；
