在 VUE 中切换样式时边框样式无法正确呈现答案

【问题标题】：border style not rendering correctly when toggle style in VUE在 VUE 中切换样式时边框样式无法正确呈现
【发布时间】：2019-03-04 00:33:05
【问题描述】：

在下方查看demo：

new Vue({
	el: '#app',
  data: {
  	flag: true
  },
  computed: {
  	style() {
      let styleA  = {
          borderBottom: '1px solid red',
          borderRight: '1px solid red'
       };
       
      let styleB = {
        	border: '1px solid green',
          borderRight: '1px solid red'
      }

      return this.flag ? styleA : styleB
     
    }
  },
  methods: {
  	changeStyle() {
    	this.flag = !this.flag;
    }
  }
})

.box {
  width: 100px;
  height: 100px;
}

<html>
  <header>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  </header>
  <body>
    <div id="app">
      <div class="box" :style="style"></div>
      <button @click="changeStyle">changeStyle</button>
    </div>
  </body>
</html>

在此演示中，单击changeStyle 按钮可切换两种不同的样式。

这是步骤：

首先，styleA 与red borderBottom 和red borderRight 一起应用
单击changeStyle 按钮，styleB 被应用，green border 和red borderRight 是预期的，但只显示green border。
再次点击changeStyle按钮，我们可以看到，只显示red borderBottom，就像red borderRight消失一样。
再次点击，您将永远看不到red borderRight

VUE中比较虚拟节点和渲染有问题吗？

【问题讨论】：

标签： javascript css vue.js virtual-dom

【解决方案1】：

我真的不知道为什么会发生这种情况。

正如你所说，虚拟 DOM 可能有问题。

根据我的经验，当 Vue 中的 DOM 渲染出现问题时，使用 key 可以解决问题。在你的情况下，确实如此。 https://jsfiddle.net/jacobgoh101/Ld5e8azs/

只需将 key 添加到具有动态样式的 div 中

<div class="box" :style="style" :key="style"></div>

key 只需是区分这两种样式的任何唯一值

【讨论】：

使用对象作为键属性的值将显示警告。您应该避免使用非基元，而是使用字符串或数字。

【解决方案2】：

这是一个错误，但这个问题被认为是wontfix。这是因为border 是一个速记属性。

编辑：Jacob 击败了我几秒钟，但是是的，正如 gh 问题中所述，解决方法是使用 key 作为哈希来强制渲染。

【讨论】：

【解决方案3】：

另一种但更丑陋的“hack”方法是区分borderRight 样式，因此styleA 中的borderRight: '1px solid red' 和styleB 中的borderRight: '1px solid red '（注意末尾的空格）。

它让 vue “认为”borderRight 发生了变化，并“强制”它应用样式（并“跳过”优化步骤，跳过应用 vue 认为已经应用的样式）。

https://jsfiddle.net/px5qoaed/

【讨论】：