【Alpine.js】x-textとx-htmlの違い

初心者向けの内容ですが、なんやかんや大事なところです。
この2つの違いはJavaScriptのinnerTextとinnerHTMLとの違いと同じ理屈なので、それが分からない方は是非読んでください。

結論

HTML要素を出力する時は必ずx-htmlを使う。

例えばこんなコードがあったとします。

<div x-data="{
    title: "<h1>こんにちは</h1>" 
}" >
    <div x-text="title"></div>
</div>

x-textの場合

上のコードではtitleプロパティの出力にx-textを使っているので、実際に出力されるのは

<h1>こんにちは</h1>

こうなります。h1タグまで「こんにちは」されてしまいます。
不要なタグまで出力してしまって不満げな表情になっちゃうワケね。

x-htmlの場合

逆にx-htmlを使うと

<div x-data="{
    title: "<h1>こんにちは</h1>" 
}" >
    <div x-html="title"></div>
</div>

素直にh1タグが出力されることなく「こんにちは」します。
ニッコリスマイリーですね～

こんにちは

冒頭で述べたように、これはJavaScriptのinnerTextとinnerHTMLとの違いと同じです。
必ず使い分けるようにしましょう。

まとめ

x-textとx-htmlを甘く見てはいけない（念押し）