Vue.js Directives

Buket
3 min readSep 12, 2023

Hello! In this my article, I will summarize how to use basic operations such as if, for in Vue.Js and make a table.

v-if

It is used for the conditional operation, which is classical in coding.

  • v-if / v-else-if / v-else
v-if, v-else-if, v-else use

v-show

The v-show command is also used to condition, like v-if.

  • Difference between v-show and v-if; If the condition is met, v-if is completely deleted from the DOM.
  • In v-show, only the CSS property of the element is displayed-none.

v-for

This is the directive we use if we need a loop. For example We can use if we want to show list in <ul><li></li></ul> tags.

v-for use

v-on

Adds an event listener to the element.

  • Instead of v-on, the @ sign is the commonly used short form.

v-bind

It allows us to bind an Html tag to the data on the vue script side. In other words, thanks to v-bind, we can use the data dynamically. With v-bind, we do one-way binding.

--

--