v-html指令简单实例分享

 v-html是Vue.js中的一个指令，它可以将一个变量中的HTML内容渲染到页面上。以下是一个v-html的使用实例：

​<div id="app">  
  <div v-html="htmlContent"></div>  
</div>  
  
<script>  
new Vue({  
  el: '#app',  
  data: {  
    htmlContent: '<h1>Hello, Vue.js!</h1><p>Welcome to the world of Vue.js</p>'  
  }  
});  
</script>

 

在这个例子中，我们首先在Vue实例中定义了一个变量htmlContent，它包含了一个h1标题和一个p段落。然后，在模板中，我们使用v-html指令将这个变量中的HTML内容渲染到页面上。具体来说，<div v-html="htmlContent"></div>这行代码会将被htmlContent变量包含的HTML内容（即<h1>Hello, Vue.js!</h1><p>Welcome to the world of Vue.js</p>）渲染到这个div元素中。

需要注意的是，在网站上动态渲染任意HTML是非常危险的，因为这可能导致跨站脚本攻击（XSS）。因此，应该只给可信的HTML代码使用v-html。