vue

How to bind text in Vue.js?

iamjnayem

Md Jannatul Nayem

Posted on February 28, 2023

How to bind text in Vue.js?

Normally we know inside of a sfc file there are three high level portions.

  1. tempalte as html
  2. script as js
  3. style as css

Binding means creating a relation between teamplate and script's data property. You may ask what is data property? Data properties are a list of property of an object which is returned by a method called data.

There are two ways to bind text in Vue.js
1.using mustache syntax
2.using special html propery that start with prefix v-text

Here mustache syntax can be used multiple times inside of a html tag where v-text html attribute is used for a completely blank html tag. because v-text will override the inner html of a particular tag.

A short example is given below:

<script>
  export default {
    data(){
      return{
        message: "A dynamic Message",
        lorem: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quod repellat vel. Aut fuga, nobis voluptate, labore culpa sint repellendus qui asperiores praesentium optio, delectus error nam porro nesciunt iste?`
      }
    }
  }
</script> 

<template>
  <h1>{{ message }}</h1>
  <p v-text="lorem"></p>
</template>

<style>

</style>

Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
iamjnayem
Md Jannatul Nayem

Posted on February 28, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related