Vue中毒者がSvelteを使ってみる。【その1 Svelteにおけるv-htmlとv-ifは?】

画像:Pixabayより

前提

• Vueにある程度の知識がある人
• あくまで初心者の意見であることを承知してくれる人

今回は何を?

今回は、SvelteをVueと比較しながら機能を学習しようと思います。
第1回は、Vueにおけるv-htmlとv-ifを、Svelteにて使おうと思います。

比較開始

・変数内のhtml要素をそのまま出力する。

Vueではv-htmlを用いますが、Svelteでは、{@html 〇〇}を使うらしいです。

//Vue.js
<template>
  <div>
    <div class="h1" v-html="h1data"></div>
  </div>
</template>

<script>
export default {
  name: "h1sample",
  data() {
    return {
      h1data: "<h1>hello</h1>",
    };
  },
};
</script>

//Svelte
<script>
  let name = "<h1>hello</h1>";
</script>

<main>
  {@html name}
</main>

<style>
</style>

Svelteでいうv-ifは?

Svelteでは{#if 条件}を使うらしいです。
今回は、変数valueが5未満か5以上かによって表示する文字を変更する仕組みを作ろうと思います。

Vue.js
<template>
  <div>
    <button @click="plus()">click</button>

　　//valueの中身を表示
    <p>{{ value }}</p>

    <div>
      <p v-if="value < 5">valueは5未満です</p>
      <p v-else>valueは5以上です</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "h1sample",
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    plus: function () {
      this.value += 1;
    },
  },
};
</script>

Svelte
<script>
  let value = 0;

  function plus() {
    value += 1;
  }
</script>

<main>
  <button on:click={plus}>click</button>

　//valueの中身を表示
  <p>{value}</p>

  {#if value < 5}
    <p>valueは5未満です</p>
  {:else}
    <p>valueは5以上です</p>
  {/if}
</main>

あとがき

次回は、フォームバリデーションを実装しようと思います。