属性を指定する - Vue.js

  • 作成日：
  • 最終更新日：2025/10/11

画像の 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>