gpt4 book ai didi

javascript - Vue.component() 中的计算属性

转载 作者:行者123 更新时间:2023-12-03 04:14:05 26 4
gpt4 key购买 nike

我正在学习 Vue.js 2。我想创建一个像这样的自定义组件:<bs-container fluid="true"></bs-container>我希望 Vue.component() 根据 fluid 中传递的 bool 值在幕后处理 bootstrap 3 容器类 Prop ,因为<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 方法。我错过了什么?

最佳答案

如果您想使用计算属性使其动态化,则必须绑定(bind)该类,如您在此处看到的 https://v2.vuejs.org/v2/guide/class-and-style.html 。另外,我会检查传递的字符串是否相等,以避免一些令人讨厌的真假转换。

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'
});

关于javascript - Vue.component() 中的计算属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44220688/

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