VueJs 2.0 - 按空格键添加/激活 CSS 类时

Question

一个初学者问题，不确定 vuejs 是否可以做到这一点。

如果你按空格键，我想添加一个 css 类。在这种情况下显示div

在此代码中，我尝试了一些东西，但没有奏效

<div @keyup.space:class="show" tabindex="0" >test</div>

https://jsfiddle.net/j7zoa2du/

Answer 1

下面的示例仅在div(或要添加@keyup的任何其他元素(具有焦点时才有效。如果您想在全球范围内触发事件，值得查看此软件包：https://www.npmjs.com/package/vue-global-events。

将包添加到项目后，可以将其添加到模板部分：

<GlobalEvents @keyup.space="activeClass=!activeClass"/>

以切换活动类或将其设置为 true。

Answer 2

它应该是这样的

<div @keyup.space="activeClass=true" :class="{'mycls':activeClass}" tabindex="0" >test</div>

在你应该有的数据中

data(){
return{
activeClass:false
//some other data you have
}
},

这将在按下空格键时将类mycls添加到div(在div 上(