使用VueJS并尝试根据Vuetify的视口断点为某些文本设置样式,我已经通过将样式绑定到如下条件来实现了这一点:
:style="$vuetify.breakpoint.name === 'xs' ? { 'font-size': '1.5rem !important' }: { 'font-size': '2.5rem !important' }"
但是我想改用计算属性,只是为了使其更整洁,并且根据Vuetify's docs,可以使用断点对象来实现,但是由于某种原因我无法使其工作
我已经看过这个discussion,并试图从@ raina77ow复制答案,但不太确定我在做什么错。
下面是我的代码;我正在尝试在v-card-title中设置h3元素的样式
<template>
<div>
<section>
<v-layout>
<v-flex xs12 sm10 offset-sm1>
<v-card flat width="auto">
<v-card-title primary-title>
<h3
class="text-xs-center headline mb-0"
:style="fontSize"
>
Some Header here
</h3>
<div class="text-xs-center pa-5 mx-5">{{ card_text }}</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</section>
</div>
</template>
<script>
export default {
computed: {
fontSize() {
switch (this.$vuetify.breakpoint.name) {
case "xs":
return "1.5rem !important";
default:
return "3rem !important";
}
}
},
data() {
return {
card_text:
"Lorem ipsum dolor sit amet, brute iriure accusata ne mea."
};
}
};
</script>
看看Vuejs devtool,我可以看到计算出的属性值发生了预期的变化,但无法弄清楚为什么它不被应用于CSS
有人可以告诉我我在做什么错!
答案 0 :(得分:1)
看起来计算属性没有返回完整的样式说明。因此,您可以更改计算函数
case "xs":
return {"font-size": "1.5rem !important"};
default:
return {"font-size": "3rem !important"};
或更改其使用方式
:style="{'font-size': fontSize}"