我想制作一个菜单组件,根据作为道具传入的菜单项的数量构建相同大小的按钮。
似 https://stackoverflow.com/a/47215040/6066886 我想给 V-flex 一个条件属性。(XS6 表示两个项目,XS4 表示三个项目,依此类推(
(类似<v-flex v-for="item in menuItems" xs[12 / menuItems.length]>
(
在链接的问题中,想法是根据条件是否传递"XS10"。
我想计算哪些将被添加到我的 V-flex 中,但我不知道如何做到这一点.. 因为我无法 V 绑定任何东西......谁能帮我?
可以将计算属性绑定为类对象:
<v-flex :class="xsComputed" v-for="(item,i) in items" :key="i">{{item}}</v-flex>
...
new Vue({
el: '#app',
data: function() {
return {
items: [1, 2, 3, 4]
}
},
computed: {
xsComputed: function() {
var step = Math.floor(10 / this.items.length)
var xsc = {}
xsc['xs' + step] = true
console.log(xsc)
return xsc
}
}
})
https://jsfiddle.net/26zfLn8j/
好的,我现在看到你的问题了。我挖了一下,这并不容易解决,因为 v-flex 不支持参数,它应该声明为属性而不是类(如本响应 https://stackoverflow.com/a/47215040/6058255 所述(。
由于没有办法创建一个没有值的属性,就像我在评论中所说的那样,并进行一些测试,我将执行以下操作:
<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
{{menuItem}}
</v-flex>
这应该使用类似这样的类呈现v-flex
元素:"xs12","xs6","xs4"
.。
然后,您应该只copy
具有v-flex
的元素的类样式,例如:
.xs12{ max-width:100%; }
.xs6{ max-width: 50%; }
.xs4{ max-width: 25%; }
.xs3{ max-width: 33.333333333%; }
...
也许不是more elegant
解决方案,但它很容易,我认为它对你有用。
希望对您有所帮助!
编辑:
回顾stdob--
答案,我现在只看到表达式:
<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
{{menuItem}}
</v-flex>
应该工作。例如,flex 组件将呈现为flex xs12
。