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

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

virtual-dom vue.js css javascript

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 年前

Jacob Goh 6 年前

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

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

钥匙 以动感的风格

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

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

woat 6 年前

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

key 作为哈希来强制渲染。

softbear 6 年前

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

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

https://jsfiddle.net/px5qoaed/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前