VDOM patching with v-bind

Demonstrate how Vue optimizes DOM updates using v-bind to minimize changes to the actual DOM.

<div id='app'>
  <p v-bind:class='paragraphClass'>This paragraph's class is dynamically bound.</p>
</div>

HTML template with a bind directive.

<style>
  .text-red { color: red; }
  .text-blue { color: blue; }
</style>

CSS styles to demonstrate class change.

new Vue({
  el: '#app',
  data: {
    paragraphClass: 'text-red'
  }
});

Initial Vue instance attaching to the #app element with initial class bound to the paragraph.

setTimeout(function() {
  app.paragraphClass = 'text-blue';
}, 3000);

Demo: Change the class after 3 seconds to 'text-blue', triggering VDOM patching.