推荐：​​Vue汇总​​

Vue - v-text、v-html

innerText和innerHTML的区别

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>
<script>
    var div1 = document.getElementById('div1');
    div1.innerText = 'Hello Kaven';
    var div2 = document.getElementById('div2');
    div2.innerHTML = 'Hello Kaven';
</script>

效果：

Vue - v-text、v-html_前端


效果是一样的。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>
<script>
    var div1 = document.getElementById('div1');
    div1.innerText = '<p>Hello Kaven</p>';
    var div2 = document.getElementById('div2');
    div2.innerHTML = '<p>Hello Kaven</p>';
</script>

效果：

Vue - v-text、v-html_前端_02


效果不一样，通过对比，可以知道它们之间的区别，​​innerText​​​是标签内部的文本，而​​innerHtml​​​是标签内部的​​HTML​​代码。

所以​​v-text​​​和​​v-html​​的区别也是如此。

代码：

和第一个例子其实是一模一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
        <div id="div1" v-text="value"></div>
        <div id="div2" v-html="value"></div>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            value: 'Hello Kaven'
        }
    })
</script>

效果：

Vue - v-text、v-html_vue.js_03


代码：

和第二个例子是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
        <div id="div1" v-text="value"></div>
        <div id="div2" v-html="value"></div>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            value: '<p>Hello Kaven</p>'
        }
    })
</script>

效果：

Vue - v-text、v-html_javascript_04

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！