VUE前后学习制表符书写的例子

动态创建一个标签页，在里面放一个表格，这样后台管理的一个基本功能就出来了。

好了，这里其实只是试水，感受一下vue的数据驱动可以怎么玩，通过实例学习vue的所有知识点。这里我们需要看看方法和css是如何设置的。

一.目标

1.选项卡可以动态创建。

2.您可以切换(无意义)并关闭tab。

3.Css设置。

4.如何处理方法。

5.翻译

第二，观念

应该有很多方法可以实现。先在这里试一个，其他的以后再说。

或者数据驱动，然后创建一个大数据包，把标签信息和表格信息都放进去，然后绑定。好像不太难。嗯，也许吧。

Tab开关，暂时用css来控制。

关闭选项卡意味着删除相应的数据。

第三，设计和编码1。数据包

Vartab=newvue ({el:' # tab '，data: {tabnumber3360 1，//标签数，这个是临时的，方便自动重新绑定currenttabid3360 1，//当前激活的标签id beforeTabId: 1的id，//最后激活的标签的id tabs 3360 { tab 1: {//可以有多个标签。这里，默认选项卡id是：“1”。//标签识别标记title: '我的桌面'，isshow: true。//是否显示message:“桌面”。OrderBy: []，//可以控制字段的顺序。如果你想调整列的顺序，只要改变这个数组。可以个性化tableth3360 {}、//表头dataList: [] //数据包的描述信息，字段名作为关键字方便调整列的顺序}}}、Methods : { tab click : function(ID){//switch tab//alert(' switch tab ' ID)；//隐藏当前标签var oldId=tab.currentTabId//切换前记录标签的id标签。beforetabid=olddidtab . tab[' tab ' OLdid]。isShow=false//切换前隐藏tab tab.currentTabId=id//记录id tab . tab[' tab ' id]。isshow=切换后为真；//显示切换后的选项卡}，closetab :函数(ID) {if (ID===' 1') {alert('这是桌面，建议不要关闭：')；返回；}删除tab . tab[' tab ' id]；//此模式不会被vue监控，因此不会触发视图选项卡的刷新，tab number=tab . tab number-1；//将就一下。触发视图的刷新//设置“活动”状态var oldId=tab.beforeTabId//最后一次激活tab var nowId=tab.currentTabId//立即激活tab if(now id===id){//关闭tab，将上一个tab设置为active tab.currentTabId=oldIdtab . tab[' tab ' OLdid]。isShow=true//这样写可以触发视图选项卡的刷新，before tabid=1；} else if (oldId===Id) {//最后一个活动选项卡关闭，前一个选项卡的id选项卡被修改。before tabid=1；}否则需要强制修改{//否则不会刷新，emmm，ok，tab.currentTabId=nowId不会自动刷新；} } }});

Methods也是一个保留字(关键字)，就是放方法。里面可以有多个方法，方法名对应标签中的on:XXXX=' 00000 '。

这里写了两个方法，一个是切换tab，一个是关闭tab。

切换选项卡：按照数据驱动视图的思路，在方法中改变数据的isShow属性的值，然后通过设置模板实现切换效果。

Close选项卡：可以杀死对应的数据，但是实现中有一个小问题，导致delele模式无法监控，视图无法及时更新。因此，添加一个标签数量属性，关闭一个标签，数量为-1，这样可以监控数据变化，然后重新绑定在一起。

2.模板

div！-tab tag-ul class=' tab left ' Li v-for=' t在tab ' v-bind : class=' { ' select tag ' :t中。is show } ' a v-3360 click=' tab click(t . id)' href=' JavaScript : void(0)' rel=' external no follow ' { t . title } } em class=' arrup ' v-: click . stop=' closeab(t . id)' x/em/a/Li/ul div v-for=' t in tab ' v-show=' t . is show ' { t . message } { { Tabnumber } } table class=' table _ default 1=='桌面'按' {t. table th [key]'的顺序排列的第个序列号/第v-for='键。title}}/th/tr tr v-for=' (tr，I)in t . datalist ' TD { { I 1 } }/TD TD v-for=' index in t . order by ' v-bind : align=' t . tableth[index]。对齐“{ tr[index]} }/TD/tr/table/div/div

切换选项卡

使用v-show控制是否显示div。

V-show是通过修改样式的属性实现的。

使用v-bind : class=' { ' select tag ' :t。是show} '来实现tab的激活效果。

V-bind:class可以绑定css名称。因为css的名字总是要被改变的，vue提供了这种设置是否为真的方法。只有当冒号为真时，才会设置css名称，这使得在驱动数据时更加方便。

四、运营效果

调试了很久，嗯，变老了，思维不够敏捷，所以很少有逻辑问题卡住了，嘿。

但最终调试成功。

动词（verb的缩写）摘要

这有一个明显的问题。这个包有点大吗？创建的TAb越多，数据包就越大。性能有问题吗？会卡住吗？

另外，这只是一张桌子。如果增加按钮、查询条件和分页控件，这个数据包的结构会变得多复杂？不要挖这样的洞。

那我们该怎么办？也许下次吧。(嗯，我还没决定。好像需要写组件或者用插槽。)谢谢大家的支持。