类不随vuejs中的变量动态变化
类不随vuejs中的变量动态变化
提问于 2018-06-01 02:38:06
我在一个div里面有一个图标，它有两个使用vue绑定的类，所有的东西一开始都可以工作，但在点击时，类'linked‘不会切换开或关，即使变量h(我在data中定义的)从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>回答 1
Stack Overflow用户
发布于 2018-06-01 04:41:16
如果你想要一个动态类，你可以尝试如下所示：
<div v-bind:class="[ somethingTrue ? 'styleA' : 'styleB' ]">Some text</div>这里有一个小提琴：https://jsfiddle.net/ku9brr33/
我进一步更新了小提琴：https://jsfiddle.net/ku9brr33/1/
首先，你在一个按钮中使用了一个标签，这个i标签默认情况下是'inline‘的，没有内容，这意味着你的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，因此不清楚您在这里还想做什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50630747
复制相关文章
相似问题