指令

最新推荐文章于 2022-10-15 22:56:32 发布

weixin_34293911

最新推荐文章于 2022-10-15 22:56:32 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/jassin-du/p/9411462.html

版权

v-text与{{ }}

<template>
    <div class="app">
        <!-- <h1>{{ title }}</h1> -->
        <h1 v-text="title"></h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title:'this is a todo list'
            };
        },
    };
</script>
<style>

</style>

缺点:使用v-text会直接将内容渲染成文本信息

当有标签套用时，如：<span>?</span>

可以使用：<html></html>

<template>
    <div class="app">
        <h1>{{ title }}</h1>
        <h2 v-text="title2"></h2>
        <h3 v-html="title3"></h3>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title:'this is a todo list',
                title2:'<span>?</span>this is a todo list',
                title3:'<span>?</span>this is a todo list',
            };
        },

    };
</script>
<style>

</style>