根据x-text/html value的值添加样式

Question

我想在文本= "-"时将td元素居中。如果文本等于其他内容，我希望它在左边对齐。

我该怎么做呢?

<td x-bind:style="$el.textContent == '-' ? { 'text-align': 'left' } : { 'text-align': 'center' }" x-text="format(variable)"></td>

是的，我可以简单地用format(variable)代替$el.textContent，但我不想两次调用format(variable)。

Answer 1

您可以在样式绑定中使用variable本身:

<td x-bind:style="variable !== '' ? { 'text-align': 'left' } : { 'text-align': 'center' }" x-text="format(variable)"></td>

这样样式绑定也是响应式的。

编辑:

如果你真的想避免在样式绑定中使用variable，你可以将x-init和$nextTick魔法结合起来等待Alpine.js完成DOM的更新，这样你就可以获取单元格的实际内容并更新单元格的样式(如果它只是一个dash)。但是这个方法不是反应性的。

<td x-init="$nextTick(() => {if ($el.textContent == '-') {$el.style['text-align'] = 'center'}})"
x-text="format(variable)">
</td>