【Vue基础认知】，关于v-html标签的使用

最新推荐文章于 2023-07-01 14:42:49 发布

bug窝

最新推荐文章于 2023-07-01 14:42:49 发布

阅读量489

点赞数

分类专栏：小白起步文章标签： vue

本文链接：https://blog.youkuaiyun.com/baidu_39037885/article/details/111029270

版权

小白起步专栏收录该内容

12 篇文章

订阅专栏

本文探讨了Vue中的v-html指令，通过实验展示了v-html显示内容时，以标签内属性值为主。详细介绍了实验代码及实际输出结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
今天刚开始接触Vue，突发奇想，v-html的显示内容是以标签里还是属性里为主呢？
实验开始
完整代码

```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery.js">
    </script>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="app">

    <h1>{{message}},,,{{message1}}</h1>
    <span :title="ti">123</span>
    <div>
        <span>{{current}}</span>
        <br>
        <input type="text" v-model:value="current">
<!--        数据实现联动，通过双向绑定实现-->
        <span>{{message1}}</span>
        <div v-html="message1">{{message1}},,,</div>
        <div v-html="message1">4</div>
    </div>
</div>
<script>
    var app1=new Vue({
        el:"#app",
        //对象在div中生效
        data:{
            message:"hello",

            ti:"zale",
            current:"helloword v-model",
            message1:"<h1>h v-html</h1>"
        }

    });

</script>
</body>
</html>