如何在Vue.js中为CSS内容分配动态变量?

xv8emn3q  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(133)

如果这表明我是一个新手,我很抱歉,但我想知道更多关于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>

我知道这是一个奇怪而具体的例子,但如果有人能给予我一些反馈,为什么这不工作,以及建议我如何才能实现这一点,我会非常感激。

gfttwv5a

gfttwv5a1#

在这种情况下,可以直接使用以下

<button :style="`letter-spacing: ${count}ch;`">

这里是Playground。
PS::stylev-bind:style的简写,如这里所解释的。
v-bind用于CSS(混合script + style)也是一个问题。
这里,您只使用script + template组合,因此插值就足够了。

相关问题