Question

在下面选中此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中进行渲染是否有问题？

Answer 1

我真的不知道为什么会这样。

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

根据我的经验，当Vue中的DOM呈现出问题时，使用ThreadPoolExecutor就可以解决问题。就您而言，确实如此。 https://jsfiddle.net/jacobgoh101/Ld5e8azs/

只需将key以动态样式添加到div

key

<div class="box" :style="style" :key="style"></div>只需是可以区分两种样式的任何唯一值

Answer 2

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

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

Answer 3

另一种但更难看的“ hack”是区分borderRight样式，因此borderRight: '1px solid red'中的styleA和{{注意末尾的空白） {1}}。

这使vue“认为” borderRight: '1px solid red '已更改，并“强制”它应用样式（并“跳过”优化步骤，跳过了vue认为已经应用的样式）。

https://jsfiddle.net/px5qoaed/

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

3 个答案: