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>
HTML template with a bind directive.
  .text-red { color: red; }
  .text-blue { color: blue; }
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.