vue(vue.js)—内置指令v-text、v-html

原文链接：vue(vue.js)—内置指令v-text、v-html – 每天进步一点点 (longkui.site)

1.v-text

v-text指令的基本功能是向其所在的标签中插入文本内容，需要注意的是，v-text会替换掉整个div的内容，实际开发中用的不多，

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   
</head>
 
<body>
    <div id="root">
        <!-- 插值语法 -->
       <div>你好，{{name}}</div>
       <!-- v-text -->
       <div v-text="name">你好</div>
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
               name:"张三"
            },
        })
    </script>
</body>
 
</html>

效果如下：

2.v-html

v-html指令可以解析html ,比如下面这样

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   
</head>
 
<body>
    <div id="root">
        <!-- 插值语法 -->
       <div>你好，{{name}}</div>
       <!-- v-text -->
       <div v-text="name">你好</div>
       <div v-html="str"></div>
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
               name:"张三",
               str:"<h3>你好，123</h3>"
            },
        })
    </script>
</body>
 
</html>

但是这个v-html使用有风险，比如下面这个xss漏洞。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   
</head>
 
<body>
    <div id="root">
        <!-- 插值语法 -->
       <div>你好，{{name}}</div>
       <!-- v-text -->
       <div v-text="name">你好</div>
       <div v-html="str"></div>
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
               name:"张三",
               str:"<a href=javascript:alert(1)> 执行了！</a>"
            },
        })
    </script>
</body>
 
</html>