gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 05:59:51 25 4
gpt4 key购买 nike

检查这个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 borderBottomred borderRight
  • 点击 changeStyle 按钮,应用 styleBgreen borderred borderRight 是预期的但仅显示绿色边框

  • 再次点击changeStyle按钮,我们可以看到,只有red borderBottom出现了,red borderRight就消失了。

  • 再次点击,永远看不到red borderRight

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

最佳答案

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

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

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

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

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

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

关于javascript - 在 VUE 中切换样式时边框样式无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52548074/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com