属性を指定する - Vue.js

  • 作成日：
  • 最終更新日：2025/06/25

画像の src を指定する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><img v-bind:src="fileName"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            fileName: "/images/express_welcome.png"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

リンク先を指定する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><a v-bind:href="google">google</a></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            google: "https://www.google.com/"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

クラス属性を指定する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      .lightgray {
        color: lightgray;
      }
      .dark {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p v-bind:class="lightClass">Hello, World</p>
      <p v-bind:class="[lightClass, darkClass]">Hello, World</p>
      <p v-bind:class="{'lightClass': isOn}">Hello, World</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            lightClass: "lightgray",
            darkClass: "dark",
            isOn: false
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>