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

Question

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

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

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

但那些在哈姆的突破：

%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' }