[Vue3] Property Binding using v-bind

In the Vue, we can use data as a property of HTML tags.

Syntax

<tag_name v-bind:property_name="data"></tag_name>
<tag_name :property_name="data"></tag_name>

As you can see, you can use v-bind: or colon(:) only.

Usage

Let's see some examples. You will be able to understand easily.

Let's create a project and test these contents.

2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS

Image Tag

<h2 class="mb-2 text-xl font-medium text-green-600">img</h2>
<div class="text-center">
  <img v-bind:src="imgUrl" />
</div>

I'll give you an additional explanation to help you understand.

<img v-bind:src="imgUrl" />

<!-- Same as -->

<img src="blah blah" />

Now, it's JS time.

data() {
  return {
    imgUrl: "https://source.unsplash.com/random/320x240",
  };
},

If you don't know where to put this code, see the below posting.

2021.06.04 - [Web/JavaScript] - [Vue] Variable, Data Types, and Displaying it

Anchor Tag

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">a</h2>
<div class="text-center">
  <a v-bind:href="aUrl">Go to the Vue.js</a>
</div>

data() {
  return {
    aUrl: "https://vuejs.org/",
  };
},

It is the same as img tag case.

Inline Style Tag

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">style</h2>
<div class="text-center">
  <div v-bind:style="{ backgroundColor: style1 }">Style1</div>
  <div v-bind:style="{ fontSize: style2 }">Style2</div>
  <div v-bind:style="{ color: style3 }">Style3</div>
</div>

data() {
  return {
    style1: "red",
    style2: "28px",
    style3: "yellow",
  };
},

Class Tag

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">class</h2>
<div class="text-center">
  <div v-bind:class="classAttr1">Class 1</div>
  <div v-bind:class="[classAttr1, classAttr2]">Class 1 & 2</div>
  <div v-bind:class="{ light: true }">Class 3</div>
</div>

data() {
  return {
    classAttr1: "text-blue-400",
    classAttr2: "text-xl",
  };
},

<style>
.light {
  color: #282a2e;
  background-color: #c5c8c6;
}
</style>

In this example, we used CSS for the first time.

It affects Class3.

Additional Notes

I want to let you know a more convenient way to make a common class for styling.

If you follow my previous posting, you would use TailwindCSS.

<style>
.btn {
  @apply px-8 py-2 rounded text-gray-600 bg-green-400 hover:bg-green-200;
}
</style>

Put this code in the App.vue.

This styling class is available anywhere in the same project.

 

Now let's use this class.

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">TailwindCSS</h2>
<div class="grid grid-cols-2 gap-4 text-center">
  <button class="btn">OK</button>
  <button class="btn">NO</button>
</div>