Question

我正在学习Vue.js 2.我想创建一个这样的自定义组件：<bs-container fluid="true"></bs-container>我希望Vue.component（）在后台处理bootstrap 3容器类。在fluid道具中传递的布尔值，因为<bs-container fluid="true"></bs-container>看起来比div class="container-fluid></div>更清晰。这是我到目前为止的尝试，但它不起作用：

HTML：

<div id="app" >
<bs-container fluid="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</bs-container>

JS：

Vue.component('bs-container',{
props: ['fluid'],
template: '<div class="setClass"><slot></slot></div>',
computed: {
    setClass: function() {
        console.log('setClass has been called');
        if (this.fluid == true) {
            return 'container-fluid';
        } else{
            return 'container';
        }
    }
}
}); 
new Vue({
        el: '#app'
});

未调用setClass方法。我错过了什么？

Answer 1

如果要使用计算属性使其动态化，则必须绑定该类，如此处https://vuejs.org/v2/guide/class-and-style.html所示。此外，我会检查传递的字符串是否相等，只是避免一些令人讨厌的truthy falsy转换。

.active{
  background-color:red
}

Vue.component（）

1 个答案: