How to bind text in Vue.js?
Md Jannatul Nayem
Posted on February 28, 2023
Normally we know inside of a sfc file there are three high level portions.
- tempalte as html
- script as js
- 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>
💖 💪 🙅 🚩
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.