:class="{'o-current': current === 'character' && isProgress}"の意味

Question

こんにちは。
今下記サイトを見ていて、ファイアボールの動くところがどのようにしてできているかを考えています。
https://www.nintendo.co.jp/switch/alera/

その中で、下記のような記述が見当たりました。

<section class="about_section o-character" key="character" v-show="current === 'character'" :class="{'o-current': current === 'character' &amp;&amp; isProgress}">

この記述の意味がわからず、止まっています。

1.keyやv-show属性など、htmlにあっただろうか？下記のリンクにありませんでした。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

2.:classとは、どういう意味だろうか？
jQueryのセレクタだと思うのですが、このようにhtml内に書くことができるのでしょうか？

最初javascriptでクラスをつけたししているのかと思ったのですが、違うようですね。

Answer 1

1, 2 のどちらも、 Vue.js のテンプレート構文というものではないかと思います。

1. key属性、v-show属性は、Vue.js の用意した独自属性です。 Vue.js 独自の属性の名前は、v-から始まるというルールを持ち、ディレクティブと呼ばれています(参考)。それぞれの属性がどのような役割を持っているのかは、 Vue.js の API ドキュメントを読むことでわかると思います。

2. Vue.js の API ドキュメントを読むと、コロンは、:v-bindディレクティブのエイリアスとなっています(参考)。

---

jQueryのセレクタだと思うのですが、このようにhtml内に書くことができるのでしょうか？

「HTML の仕様として、独自の属性を作成し、要素に付与することは妥当な記述か？」という質問だと読みました。結論をいえば、HTML の文法として妥当ではありません。しかし、動作はします。なぜならば、妥当ではない属性はブラウザでは無視され、描画時になんらかの影響を及ぼすことがないためです。

Answer 2

htmlには独自属性というものがあるようですね。
keyはおそらく独自属性なのですね。
簡単な質問ですみませんでした。