Ian*_*ong 5 javascript css vue.js virtual-dom
在下面查看此演示：
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？
我真的不知道为什么会发生这种情况。
正如你所说，虚拟 DOM 可能有问题。
根据我的经验，当 Vue 中 DOM 渲染出现问题时，使用key可以解决问题。就你而言，确实如此。https://jsfiddle.net/jacobgoh101/Ld5e8azs/
只需添加key动态样式的div即可
<div class="box" :style="style" :key="style"></div>
key只需要能够区分这两种风格的任何独特值
| 归档时间： |
|
| 查看次数： |
343 次 |
| 最近记录： |