v-text和v-html

何知曲成溪

于 2020-08-05 13:38:29 发布

阅读量215

点赞数

本文链接：https://blog.csdn.net/lemon_T_/article/details/107813288

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{ text }}</div>
<!--    s说明：v-text指令解决表达式闪烁到字符串问题-->
<!--    说明：v-开头的指令中，写的属性值如果是data中的变量，不要加{{}},会自动去data中找，如果没有会报错-->
<!--    说明：v-开头的指令中，写的属性值如果是普通的字符串，加‘’-->
    <div v-text="text">文字会被覆盖</div>
    <div v-html="html">文字会被覆盖</div>
    <div v-html="'demo'"></div>
</div>

<script src="lib/vue-2.4.0.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            text:'<h1>渲染时会被源码输出text</h1>',
            html:'<h2>渲染时会被源码输出html</h2>'
        }
    })
</script>
</body>
</html>