指令

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>

 

posted @ 2018-08-03 08:59  小杜要加油  阅读(149)  评论(0)  编辑  收藏  举报