Javascript 为什么Vue.js密钥修饰符仅适用于`<；按钮>；`而不是`<；div>；`？

有关工作示例，请参阅

如果单击按钮并使用上/下箭头键，则按钮填充将增加/减少

相关的HTML是：

<div class="inline-block {{ highlight_css }}">
    <button @click="toggleEditMode"
            @keydown.up.prevent="morePadding"
            @keydown.down.prevent="lessPadding"
            v-bind:style="padding"
            class="bgc-hf8f8f8 font-size-1rem line-height-23 bold border-1px-solid-gray border-radius-3">
        {{ status_text }}<br>padding: {{ amount }}px;
    </button>
</div>

在我将

标记更改为

标记之前，一切都很正常。

@单击

有效，但关键修改器似乎已损坏

---

我，但找不到说明

标记特殊的内容。

div

元素默认不可聚焦。要使其可聚焦，可以添加

tabindex

属性。如果不希望元素通过顺序导航进行迭代，请使用负值

newvue({
el:'突出显示'，
数据：{
按钮_文本：“已禁用”，
金额：0，
突出显示“\u css:”，
填充：“”，
可编辑：false
},
方法：{
toggleEditMode:function（）{
this.editable=！this.editable；
这个.changeText（）；
this.highlight（）；
},
changeText:function（）{
如果（此.可编辑）{
this.button_text='Enabled'；
}
否则{
this.button_text='Disabled'；
}
},
突出显示：函数（）{
如果（此.可编辑）{
this.highlight_css='border-2px-solid-orange border-radius-3'；
}
否则{
this.highlight_css=''；
}
},
morePadding:function（）{
如果（此.可编辑）{
这个.amount++；
this.padding='padding:'+this.amount+'px；'；
}
},
lessPadding:function（）{
如果（this.editable&&this.amount>0）{
这是一笔数额；
this.padding='padding:'+this.amount+'px；'；
}
}
}
});
@import'https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css';
.内联块{
显示：内联块
}
.bold{
字体大小：粗体
}
.border-5px-solid-orange{
边框：5px纯橙
}
塔利恩中心{
文本对齐：居中
}
.边框-1px-实心-灰色{
边框：1px纯色灰色
}
.bgc蓝色{
背景颜色：蓝色
}
.边界半径-3{
边界半径：0.1875em
}
.显示无{
显示：无
}
怀特先生{
颜色：白色
}
.第50名{
填充顶部：3.125em
}
.5-5{
填充：0.3125em
}
.1-10{
填充：0.625em
}
.前20名{
填充顶部：1.25em
}
.bgc-HF8F8{
背景色：#F8
}
.毛利-前30名{
边际上限：1.875em
}
.border-1px-solid-orange{
边框：1px纯橙
}
.文本居中对齐{
文本对齐：居中
}
.内联显示{
显示：内联
}
瑞德先生{
颜色：红色
}
.保证金-底价-20{
保证金底部：1.25em
}
.border-2px-solid-orange{
边框：2件纯色橙色
}
.line-height-23{
线高：1.4375em
}
.font-size-1rem{
字号：1rem
}
.利润率前50名{
边缘顶部：3.125em
}

单击按钮。
然后使用上下箭头键更改按钮填充。
{{button_text}}
填充：{{amount}}px；
{{$data | json}
div
元素默认情况下不可聚焦。要使其可聚焦，可以添加
tabindex
属性。如果不希望元素通过顺序导航进行迭代，请使用负值


newvue({
el:'突出显示'，
数据：{
按钮_文本：“已禁用”，
金额：0，
突出显示“\u css:”，
填充：“”，
可编辑：false
},
方法：{
toggleEditMode:function（）{
this.editable=！this.editable；
这个.changeText（）；
this.highlight（）；
},
changeText:function（）{
如果（此.可编辑）{
this.button_text='Enabled'；
}
否则{
this.button_text='Disabled'；
}
},
突出显示：函数（）{
如果（此.可编辑）{
this.highlight_css='border-2px-solid-orange border-radius-3'；
}
否则{
this.highlight_css=''；
}
},
morePadding:function（）{
如果（此.可编辑）{
这个.amount++；
this.padding='padding:'+this.amount+'px；'；
}
},
lessPadding:function（）{
如果（this.editable&&this.amount>0）{
这是一笔数额；
this.padding='padding:'+this.amount+'px；'；
}
}
}
});
@import'https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css';
.内联块{
显示：内联块
}
.bold{
字体大小：粗体
}
.border-5px-solid-orange{
边框：5px纯橙
}
塔利恩中心{
文本对齐：居中
}
.边框-1px-实心-灰色{
边框：1px纯色灰色
}
.bgc蓝色{
背景颜色：蓝色
}
.边界半径-3{
边界半径：0.1875em
}
.显示无{
显示：无
}
怀特先生{
颜色：白色
}
.第50名{
填充顶部：3.125em
}
.5-5{
填充：0.3125em
}
.1-10{
填充：0.625em
}
.前20名{
填充顶部：1.25em
}
.bgc-HF8F8{
背景色：#F8
}
.毛利-前30名{
边际上限：1.875em
}
.border-1px-solid-orange{
边框：1px纯橙
}
.文本居中对齐{
文本对齐：居中
}
.内联显示{
显示：内联
}
瑞德先生{
颜色：红色
}
.保证金-底价-20{
保证金底部：1.25em
}
.border-2px-solid-orange{
边框：2件纯色橙色
}
.line-height-23{
线高：1.4375em
}
.font-size-1rem{
字号：1rem
}
.利润率前50名{
边缘顶部：3.125em
}

单击按钮。
然后使用上下箭头键更改按钮填充。
{{button_text}}
填充：{{amount}}px；
{{$data | json}
我怀疑按钮（如链接）可以有焦点，但普通div没有。@ceejayoz如果它们有
tabindex
@Oriol-cleer，它们可以+1I可疑按钮（如链接）可以有焦点，但普通div没有。@ceejayoz如果它们有
tabindex
@Oriol-cleer，它们可以有焦点+1如果用
v-bind:style=“padding”
替换
style=“{{padding}}”
，则错误消失。如果用
v替换
style=“{{padding}}”
-
morePadding: function() {
    if(this.editable) {
        this.amount++;
        this.padding = 'padding: ' + this.amount + 'px;';
    }
},