vue.js - V-HTML替代

2017-10-17 745 views 1 likes

我来自一个反应背景JSX，所以使用类似vue.js - V-HTML替代

var test = <div>i am a div</div>

设置一些事情的HTML是很常见的。我知道你可以使用V-HTML实现同样的事情，但不知道是否这是最好的/最安全的方式这样做给我下面的代码：

VUE组件

<template src="./templates/General.html"></template> 

<script> 
    export default { 
     name: 'guide-general', 
     data: function() { 
      return { 
       guides: [ 
        { 
         title: "first", 
         description: "First description" 
        }, 
        { 
         title: "second", 
         description: "second description" 
        }, 
        { 
         title: "third", 
         description: `<ul> 
         <li> 
          test 
         </li> 
         </ul>` 
        } 
       ] 
      } 
     }, 
     methods: { 

     } 
    } 
</script> 

<style scoped> 
</style>

HTML模板

<article> 
    <div v-for="guide in guides"> 
     <h4>{{ guide.title }}</h4> 
     <div v-html="guide.description"> 
     </div> 
    </div> 
</article>

来源

2017-10-17 A. Lau

回答

如果要包含从vue属性渲染HTML的功能，则需要使用v-html。如果您允许用户修改HTML可能来自的属性，那么您将遇到与XSS漏洞相关的安全问题，在这种情况下，您需要在数据发送回服务器（我强烈建议你为此使用一个有信誉的外部库）。如果用户不会修改您的数据，那么根本就不应该使用v-html。

无论何时您允许用户修改任何类型的数据，您都会自行解决潜在的安全问题。你只需要预测这些问题是什么并且解决它们。

来源

2017-10-17 05:49:08

vue.js - V-HTML替代

回答

相关问题