代码之家 › 专栏 › 技术社区 › Clocher Zhong

在VUE中切换样式时边框样式未正确呈现

virtual-dom vue.js css javascript

4

Clocher Zhong · 技术社区 · 6 年前

看看这个 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
更改样式 按钮, styleB green border 和 红色边框右 绿色边框 如图所示。
点击我们可以看到,只有如图所示消失吧。
再按一下,你将永远看不到

在中比较虚拟节点和渲染是否有问题 VUE ?

3 回复 | 直到 6 年前

1

4

Jacob Goh 6 年前

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

根据我的经验,当在Vue中呈现DOM出现问题时,使用 key https://jsfiddle.net/jacobgoh101/Ld5e8azs/

钥匙 以动感的风格

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

只是需要任何独特的价值,区分这两种风格

2

3

woat 6 年前

wontfix . 这是因为 border 是一个速记属性。

key 作为哈希来强制渲染。

3

1

softbear 6 年前

另一种更丑陋的“黑客”方法是区分 borderRight 风格,所以 borderRight: '1px solid red' 在里面 styleA ,和 borderRight: '1px solid red ' (注意结尾的空白)在 styleB .

右边界 已更改,并“强制”它应用样式(并“跳过”优化步骤,即它跳过应用vue认为已应用的样式)。

https://jsfiddle.net/px5qoaed/