如果这表明我是一个新手,我很抱歉,但我想知道更多关于Vue中的动态变量和CSS的信息。我想创建一个系统,每次按下按钮时,按钮标签的字母都会变得更远。
在组件内部,可以使用计数器脚本,例如:
<script>
export default {
name: 'Counter',
data() {
return {
count: 3,
}
},
methods: {
intrement() {
this.count += 1;
}
}
}
</script>
然后使用count整数值来更改CSS文本间距例如?这样在模板中,我可以用途:
<template>
<header>
<div>
<button class="header_button" style="letter-spacing: `v-bind(count) + ch`;">MYBUTTON</button>
</div>
</header>
</template>
我知道这是一个奇怪而具体的例子,但如果有人能给予我一些反馈,为什么这不工作,以及建议我如何才能实现这一点,我会非常感激。
1条答案
按热度按时间gfttwv5a1#
在这种情况下,可以直接使用以下
这里是Playground。
PS:
:style
是v-bind:style
的简写,如这里所解释的。v-bind
用于CSS(混合script
+style
)也是一个问题。这里,您只使用
script
+template
组合,因此插值就足够了。