35
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsでテンプレートのタグを動的に変える

Last updated at Posted at 2018-02-01

はじめに

動的にHTMLのタグを変えたいときってありませんか?

Vue.jsでは描画関数を使ったやり方が公式で説明されています。
[アンカーヘッダのレベルを動的に変えるコンポーネントの例] (https://jp.vuejs.org/v2/guide/render-function.html)

コンポーネントの部分だけ見てみます。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // タグ名
      this.$slots.default // 子の配列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

この描画関数は普段のテンプレートに比べつらいと感じる人も多いと思います。
今回みたいな簡単な例ならば良いですが、すこしでも複雑になったらお手上げです :innocent:
これでは「親しみやすいフレームワーク」というVue.jsの思想から遠ざかってしまいます。

そこで慣れ親しんだテンプレートで同じことをするためにisを使います。

is

公式のisの説明 (https://jp.vuejs.org/v2/api/#is)

isはコンポーネントの動的に切り替えに使われるイメージですが、タグを切り替える用途にも使えます。
アンカーヘッダ-を動的に変えるコンポーネントをisを使って実装してみます。

Vue.component('anchored-heading', {
  template: '<compnent :is="tag"><slot></slot></compnent>',
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    tag() {
      return `h${this.level}` 
    } 
  },
})

これならさらっと書けそうですね!:sunglasses:
今回はjs上でテンプレートを書きましたが、もちろん単一ファイルコンポーネントとして書くこともできます。

デモ

CodePenでisを使った例と描画関数を使った例を並べてみました。
Levelを変えると、動的にHTMLも書き換えられているのが確認できると思います。

See the Pen Change Tag with Vue.js Template by totto357 (@totto357) on CodePen.

余談

CodePenが埋め込めるようになったのめっちゃ便利ですね:kissing_closed_eyes:
Qiitaさんありがとう。

35
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?