指令添加样式类名未生效

[cloudcome]

Version

2.6.10

Reproduction link

https://jsfiddle.net/po0jg4us/

Steps to reproduce

1、注册全局指令 v-class

Vue.directive('class', function (el, binding) {
    el.classList.add(binding.value);
});

2、注册全局组件 demo-comp

Vue.component('demo-comp', {
    template: '<div v-class="\'comp\'"></div>'
});

3、实例化 Vue，使用字符串模板

new Vue({
    el: '#app',
    template: '<demo-comp class="app"></demo-comp>'
});

4、最终结果：

<div class="app"></div>

What is expected?

期望 div 上有 app 和 comp 两个样式类

What is actually happening?

结果只有 app 一个样式类

[posva]

classes added on directives get overridden when Vue renders because Vue cannot be aware of them. You should avoid it

---

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

[cloudcome]

为什么会被忽略，而如果是这样的话，则又正常结果。

1、注册全局指令 v-class

Vue.directive('class', function (el, binding) {
    el.classList.add(binding.value);
});

2、注册全局组件 demo-comp

Vue.component('demo-comp', {
    template: '<div class="demo" v-class="\'comp\'"></div>'
    //            ^^^^^^^^^^^^^^^^
    // 但如果是在这里添加一个类名，最终结果又是正常的！！
});

3、实例化 Vue，使用字符串模板

new Vue({
    el: '#app',
    template: '<demo-comp class="app"></demo-comp>'
});

4、最终结果：

<div class="demo app comp"></div>