做需求遇到一个样式问题，横向的菜单tab在非管理员模式下有7个，在管理员模式下有8个，每个tab在中英文状态下的长度又有长有短，用弹性布局搞了好久总是不如意，最后决定用%写死每个tab的width，记录踩坑如下：

1、最开始给每个元素的style绑定一个变量，切换语言时判断各种条件，更改变量值，不为所动= =失败

2、以为是style的问题，换成class绑变量值，同样改动不生效= =失败

3、查阅资料发现官方这样推荐：

v-bind:class="{ active: isActive, 'text-danger': hasError }"

其中active和text-danger是想动态绑定的两个类名，isActive和hasError是控制其:前边类名是否显示的动态变量

但是这种isActive和hasError只能取true或者false两种值，也就是说这个class的样式要么生效要么不生效，但是我一个class至少有4种样式。。（逐渐暴躁）

4、又是一顿翻资料，发现了这个：(绑定一个返回对象的计算属性：Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。）

<div v-bind:class="classObject"></div>

data: {

    isActive: true, error: null

},

computed: {

    classObject: function () {

          return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' }

   }

}

套用一下：

这里是8个标签

对应8个计算属性

以home为例，在4种条件下的width分别为13%，11%，10%，9%，于是定义4个对应的class：home1234

 

计算属性判断方法如下：

这样就大功告成了，由于计算属性会自动监听变量变化，也不需要在点击切换中英文的时候做什么处理了～～

 

好久没写博客了，最近发现什么小技巧就直接点个收藏，这个真的把我折磨到觉得不记一下都对不起我这大半天的时间。。。希望以此为契机继续开始写博客吧～～～在打工人的路上努力前行！