v-bind Directive in Vue.js Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is bound to our data defined in Vuejs instance then dynamic changes can be observed as data changes. First, we will create a div element with id as app, and let's apply the v-bind directive to an element. Further, we can use a button to execute a function when a click even occurs which will inverse the value of data.Syntax:v-bind:attribute="expression";Since developers use this attribute too often, Vuejs provides a shorthand for this attribute as follows::attribute="expression";Things we can do with v-bind:Multiple classes can be passed.Classes can be passed as arrays.Supports variables to be assigned as a condition for classes and props.Supports variable as arrays also.It can be used in child components also.Inline styles can also be assigned using v-bind. Parameters: This directive accepts expression which will be deciding which attribute value to use. Example: This example uses Vuejs to toggle the classes of an element with v-bind. Further, we will use CSS to apply a different color to each class so that we can see them changing. HTML <!DOCTYPE html> <html> <head> <!-- Load Vuejs --> <script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script> <style> .active { color: blue; } .error { color: red; } </style> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <b> VueJS | v-bind directive </b> </div> <div id="canvas" style= "border:1px solid #000000; width: 600px;height: 200px;"> <div id="app" style= "text-align: center; padding-top: 40px;"> <button v-on:click= "ifActive = !ifActive"> Click to Toggle </button> // here we have used the : short hand of v-bind: <h1 :class= "{active: ifActive, error: !ifActive}"> GeeksforGeeks </h1> </div> </div> <script> var app = new Vue({ el: '#app', data: { ifActive: true } }) </script> </body> </html> Output: Comment More infoAdvertise with us G gurrrung Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Explore JavaScript Tutorial 8 min read JavaScript BasicsIntroduction to JavaScript 4 min read JavaScript Versions 2 min read How to Add JavaScript in HTML Document? 3 min read JavaScript Syntax 6 min read JavaScript Output 4 min read JavaScript Comments 2 min read JS Variables & DatatypesVariables and Datatypes in JavaScript 6 min read Global and Local variables in JavaScript 4 min read JavaScript Let 6 min read JavaScript const 5 min read JavaScript Var Statement 7 min read JS OperatorsJavaScript Operators 5 min read Operator precedence in JavaScript 2 min read JavaScript Arithmetic Operators 5 min read JavaScript Assignment Operators 5 min read JavaScript Comparison Operators 5 min read JavaScript Logical Operators 5 min read JavaScript Bitwise Operators 5 min read JavaScript Ternary Operator 4 min read JavaScript Comma Operator 2 min read JavaScript Unary Operators 4 min read JavaScript in and instanceof operators 3 min read JavaScript String Operators 3 min read JS StatementsJavaScript Statements 4 min read JavaScript if-else 3 min read JavaScript switch Statement 4 min read JavaScript Break Statement 2 min read JavaScript Continue Statement 1 min read JavaScript Return Statement 4 min read JS LoopsJavaScript Loops 3 min read JavaScript For Loop 4 min read JavaScript While Loop 3 min read JavaScript For In Loop 3 min read JavaScript for...of Loop 3 min read JavaScript do...while Loop 4 min read JS Perfomance & DebuggingJavaScript | Performance 4 min read Debugging in JavaScript 4 min read JavaScript Errors Throw and Try to Catch 2 min read JS ObjectObjects in Javascript 4 min read Object Oriented Programming in JavaScript 3 min read JavaScript Objects 6 min read Creating objects in JavaScript 5 min read JavaScript JSON Objects 3 min read JavaScript Object Reference 4 min read JS FunctionFunctions in JavaScript 4 min read How to write a function in JavaScript ? 4 min read JavaScript Function Call 2 min read Different ways of writing functions in JavaScript 3 min read Difference between Methods and Functions in JavaScript 3 min read Explain the Different Function States in JavaScript 3 min read JavaScript Function Complete Reference 3 min read JS ArrayJavaScript Arrays 7 min read JavaScript Array Methods 7 min read Best-Known JavaScript Array Methods 6 min read Important Array Methods of JavaScript 7 min read JavaScript Array Reference 4 min read Like