类不随 vuejs 中的变量动态变化

Question

我在一个 div 中有一个图标，它有两个使用 vue 绑定到它的类，最初一切正常，但点击类“链接”时，即使变量 h（我在 data 中定义）也不会打开或关闭) 从真变为假，反之亦然。怎么回事？

        <div v-for="(i, ind) in icons_row1" :key="ind" xs4 md2>
            <button @click="h = !h" :title="titles[ind]"><i :class="[{'linked' : h}, i]" class="ficon" ></i></button>
        </div>

Answer 1

如果你想要一个动态类，你可以试试这样：

  <div v-bind:class="[ somethingTrue ? 'styleA' : 'styleB' ]">Some text</div>

这是一个小提琴：https://jsfiddle.net/ku9brr33/

---

我进一步更新了小提琴： https://jsfiddle.net/ku9brr33/1/

首先，您在按钮内使用标签，此 I 标签默认为“内联”，没有内容，这意味着您的 I 标签将显示为不可见...尝试在其中添加一些文本。

<div id="app">
  <div>
     <button @click="somethingTrue = !somethingTrue" :title="btnTitle"> 
      click me  <i v-bind:class="[ somethingTrue ? 'styleA' : 'styleB' ]">Some text</i>
     </button>
  </div>
</div>

标题属性是当您将鼠标悬停在按钮上时显示的内容（参见我的示例），而不是显示给最终用户的文本。

由于您从未在原始问题中提供任何 CSS，因此您还不清楚您在这里真正想要做什么。