04-Vue之本地应用v-text/v-html指令

最新推荐文章于 2022-02-15 22:41:10 发布

爱学习de测试小白

最新推荐文章于 2022-02-15 22:41:10 发布

阅读量152

点赞数

分类专栏： # Vue 文章标签： vue 前端

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/112133279

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

1. v-text指令

2. v-html指令

3. v-text 和 v-html 区别

1. v-text指令

作用：设置标签的文本值（textContent）
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 相当于textContent -->
        <h2 v-text='message'></h2>  
        <h2 v-text='age'></h2>

        <!-- 使用差值表达式替换部分内容 -->
        <h2>{{message}}单身哦！</h2>
        <h2 v-text='base'>这里不显示哦</h2>

        <!-- 支持表达式 -->
        <h2 v-text='base + "!"'>这里不显示哦</h2>


    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script>
         var app = new Vue({
             el:'#app',
             data:{
                 message:'大家好，我是测试小白！',
                 age:'今年26岁',
                 base:'辽宁-大连'
             }

         })
     </script>
    
</body>
</html>

2. v-html指令

作用：设置元素的innerHTML
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 文本时无区别 -->
        <h2 v-html='mes'></h2>
        <h2 v-text='mes'></h2>

        <!-- html标签时有区别 -->
        <h2 v-html='info'></h2>
        <h2 v-text='info'></h2>


    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                mes:'大家好，我是测试小白！',
                info:'<a href="https://blog.csdn.net/IT_heima">小白的博客</a>'

            }

        })
    </script>
</body>

</html>