如何在HAML中添加冒号或点的自定义属性？

Question

我开始使用Vue.js，其中事件处理程序需要冒号，有时还需要点：

<div v-on:click="doSomething">

或<div v-on:keyup.enter="doSomething">

但那些在HAML中突破：

%div{ v: { on:click: 'doSomething' } }

加倍点：%div{ v: { on:keyup.enter: 'doSomething' } }

有没有办法使用它们，某种方式就像下划线一样连字符？

示例：%div{ data: { my_value: 'something' } }

将呈现：<div data-my-value="something">

Answer 1

只需使用字符串代替地图键的符号：

%div{ v: { 'on:click' => 'doSomething' } }

和

%div{ v: { 'on:keyup.enter' => 'doSomething' } }

Answer 2

您可以使用以下替代语法：

%div{"v-on:keyup.enter": 'doSomething'}

和

%div{"v-on:click": 'doSomething' }