vue指令：v-html

素颜马尾好姑娘i 2022-08-28 05:54 46阅读 0赞

**注意：代码所需vue可以通过npm i vue --save下载，然后引入即可**

**案例**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-html</title>
        <script src="./node_modules/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <div v-html="name"></div>
            <div v-html="age"></div>
            <div v-html="sex"></div>
            <hr>
            <div v-html="str"></div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    name: '妲己',
                    age: 20,
                    sex: '女',
                    str: '<strong><em>这是一个标签</em></strong>'
                },
                // 方法
                methods: {}
            })
        </script>
    </body>
    
    </html>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/dd847a2f37d44414b14e5da52cc9418a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue指令

Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ...

迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 11 阅读

相关 vue 指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2023年11月05日 00:52/ 0 赞/ 56 阅读

相关 vue指令

vue指令一个正在努力爱好运动的前端座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

朱雀/ 2022年12月22日 06:12/ 0 赞/ 87 阅读

相关 Vue--常见指令

vue实例的作用范围：在el选择的元素内部都可以，使用el进行挂载选择器：除了id选择器以外，还有class选择器，标签选择器 vue取消了对dom元素的操作，通过t

迷南。/ 2022年12月07日 04:25/ 0 赞/ 123 阅读

相关 vue指令

vue介绍 1.作者尤雨溪(vue) \[阿里\] 3.0 2.vue概念官网：[Vue.js][] 渐进式 JavaScript 框架渐进式：主

偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 104 阅读

相关 vue基本指令

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

逃离我推掉我的手/ 2022年02月21日 08:44/ 0 赞/ 219 阅读

相关 vue 基础指令

<body> <div id="app">  <!--input value属性默认会被vue忽略

待我称王封你为后i/ 2021年12月12日 01:55/ 0 赞/ 200 阅读

相关 Vue指令

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 364 阅读

相关 vue指令大全

我之前学了学angular 发现angular和vue的指令有点类似先说一下 new Vue(\{ el: "\box", // element

布满荆棘的人生/ 2021年09月16日 13:14/ 0 赞/ 429 阅读

相关 Vue指令

Vue指令 1. watch监听在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

￡神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 431 阅读