Vue.js | v-html 指令

v-html指令是一个Vue.js指令，用于使用我们的数据更新元素的 innerHTML。这就是它与 v-text 的区别，这意味着当 v-text 接受字符串并将其视为字符串时，它将接受字符串并将其呈现为 HTML。首先，我们将创建一个 id 为app的 div 元素，然后将v-html指令应用于该元素，并将数据作为消息。现在我们将通过使用包含我们消息的 data 属性初始化一个 Vue 实例来创建此消息。

句法：

v-html="data"

参数：该指令接受一个参数，即数据。
示例：此示例使用 VueJS 使用 v-html 更新元素的 html。

HTML

  

    
        VueJS | v-html directive
    
  
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            VueJS | v-html directive
        
    
  
    
        
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                message: '<h1>HELLO '+
                           '<span style="color:blue;">'+
                              'WORLD</span>'+
                         '</h1>'
            }
        })
    

  

输出：