vue学习（四） v-text v-html学习

最新推荐文章于 2023-12-19 08:13:53 发布

dream21st

最新推荐文章于 2023-12-19 08:13:53 发布

阅读量132

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_36305027/article/details/83691871

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1，代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{content}}
        <div v-text="content"></div>
        <div v-html="content"></div>
        {{cont}}
        <div v-text="cont"></div>
        <div v-html="cont"></div>

        {{cont + '------>>>>'}}
        <div v-text="cont+ '------>>>>'"></div>
        <div v-html="cont+ '------>>>>'"></div>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                cont:'<h1 style="color: red">hello vue</h1>'
            }
        })
    </script>
</body>
</html>

2，页面效果