2018/05/08ツイートシェアはてブGoogle+PocketLINE目次VクラスはVue.jsの基本!v-textv-htmlv-showv-ifv-forVクラスはVue.jsの基本!Vue.jsを操作するのに欠かせないのがVクラスです。Vue.jsを勉強する人には「Vクラスはどんな時に使用するの?」と思われる方も少なくはないと思います!今回はそのような人の為にVクラスをまとめて見ました。要素のtextContentを更新できる。マスタッシュ記法でも使用が可能。要素のinnerHTMLを更新できる。式の値の真偽に応じて、要素のCSSプロパティdisplayをトグルできる。バインディングの値の真偽値に基いて要素の描画ができる。v-forv-text要素のtextContentを更新できます。記述しなくても描画できます。CodePen.0v-html要素のinnerHTMLを更新できます。v-textとは違いtextContentではなくHTMLのタグを描画することができます。CodePen.0v-show式の値の真偽に応じて、要素のCSSプロパティdisplayをトグルで操作できます。HTML要素を追加・削除するわけではなく、CSSの「display:block;」「display:none;」で表示切り替えをします。CodePen.0v-ifバインディングの値の真偽値に基いて要素の描画を行います。v-showはCSSで表示・非表示を切り替えていましたが、v-ifは要素自体を生成・破棄できます。CodePen.0v-for要素またはテンプレートブロックを複数回描画します。式を使う必要があります。CLIの導入|Vue.js入門この記事を書いた人Higemura高卒フロントエンジニア高校卒業後にHTMLやCSSなどから独学で勉強していき、高卒FE(フロントエンジニア)として都内でフリーランスで活動中。高卒でもWebエンジニアとして活躍できることを証明する為、初心者でもわかりやすいWeb制作ノウハウを発信しています。コメントをキャンセルメールアドレスが公開されることはありません。次の記事doresuwe.comという通販サイトから商品が届かなくて返...カテゴリープログラミングHTMLCSSJavaScriptVue.jsAdobeIllustratorツールコマンドラインサービス格安SIMAWSGitHub雑談サイト管理人Higemura高卒FE(フロントエンジニア)独学でWeb制作を勉強してフリーランスで活動しています。柴犬2匹飼っておりワンコについても呟いてます。