Vue 3在标签中保留空的类属性



我在我的页面上使用vue3作为响应性内容(没有node-js,没有路由器,什么都没有,只有<script src="vue.js">和内联模板)。所以我有一个问题与类绑定

const app = Vue.createApp({});
console.log("Vue version:", app.version);
app.component('application', {
data() {
return {
isActive: false,
}
},
template: '#application'
});
app.mount('#app');
<script src="https://unpkg.com/vue@next"></script>
<script type="text/html" id="application">
<div :class='{"someClass": isActive}'>some text</div>
<div :class='[isActive ? "someClass" : ""]'>none class</div>
<div :class='[isActive ? "someClass" : null]'>null class</div>
<div :class='[isActive ? "someClass" : undefined]'>undef class</div>
</script>
<div id="app">
<application></application>
</div>

渲染时它总是保持class属性(渲染元素)即使我在这里输入none/null

<div class>some text</div>
<div class>none class</div>
<div class>null class</div>
<div class>undef class</div>

我发现了一些例子,但我猜它只适用于vue 2与空参数

这并不是一个大问题,因为它不会对DOM元素和结构造成任何问题,但它真的让我很恼火。

这是Vue 3中的一个小问题,应该已经修复了,但没有…

当/如果上面提到的问题将被正确修复,当value为空时(如Vue 2中的情况),应该删除class属性

最新更新