Nuxt.js3 変数を使用する

• 作成日 2024.05.24
• nuxt.js

Nuxt.js3で変数を使用する手順を記述しておきます。マスタッシュ構文を使用します。

目次

• 1. 環境
• 2. 変数を使用

環境

• OS  ubuntu23.10
• node v20.13.1
• npm 10.8.0
• Nuxt.js v3.11.2

変数を使用

マスタッシュ構文である「{{}}」と、setupを使用することで可能です。

<script setup lang="ts">

const msg1 = ref<string>("Hello world!!");
const msg2 = ref<string>("Hello world2!!");

</script>

<template>
  <div>
    <h1>{{ msg1 }}</h1>
    <h1>{{ msg1 }}</h1>
    <h2>{{ msg2 }}</h2>
  </div>
</template>

実行結果

• 前の記事
  

  PowerShell hyper-vを有効にする 2024.05.23

• 次の記事
  

  MariaDB 処理時間の長いクエリの上位を抽出する 2024.05.27