Vue.js 中的 v-bind 指令

v-bind指令是一个Vue.js指令，用于将一个或多个属性或组件属性绑定到元素。如果该属性绑定到我们在 Vue 实例中定义的数据，则可以随着数据的变化而观察到动态变化。首先，我们将创建一个 id 为app的 div 元素，然后将v-bind指令应用于一个元素。此外，我们可以使用按钮在点击甚至发生时执行一个函数，这将反转数据的值。

句法：

v-bind:attribute="expression";

参数：该指令接受将决定使用哪个属性值的表达式。

示例：此示例使用 Vue.js 通过 v-bind 切换元素的类。此外，我们将使用 CSS 为每个类应用不同的颜色，以便我们可以看到它们的变化。

HTML

  

  
    
    
    
  
    
        .active {
            color: blue;
        }
  
        .error {
            color: red;
        }
    

  

    
        
            GeeksforGeeks
        
        
            VueJS | v-bind directive
        
    
  
    
  
        
            
                Click to Toggle
            
              
            
                GeeksforGeeks
            
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                ifActive: true
            }
        })
    

  

输出：