Skip to content

All topics  /  Vue

Vue Js Bind Element Attributes Example

Vue ·

Hi Guys,

In this example,I will explain you how to use Bind Element Attributes in vue.js.we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”

Here, I will give you full example for simply bind element attributes in vue.js as bellow.

Example


<!DOCTYPE html>
<html>
<head>
  <title>Vue Js Bind Element Attributes Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js Bind Element Attributes Example</h5>
        </div>
        <div class="card-body">
          <div id="app">
            <span v-bind:title="message">
                Hi Dev
                This is nicesnippets.com
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>  
new Vue({
  el: "#app",
  data: {
      message: 'You loaded this nicesnippets.com on ' + new Date().toLocaleString()
  }
})  
</script>
</body>
</html>

OutPut

It Will help you..

More on this topic