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

Question

我在 div 中有一个图标，它有两个使用 vue 绑定(bind)到它的类，最初一切正常，但是单击类“链接”时不会打开或关闭，即使变量 h(我已经在数据中定义) ) 从 true 变为 false，反之亦然。怎么回事？

        <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>

这是一个 fiddle :https://jsfiddle.net/ku9brr33/

---

我进一步更新了 fiddle : 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>

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

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