“Vue v-html 指令”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
第12行： 第12行：
 
   }
 
   }
 
})
 
})
−
</syntaxhighlight>对于普通文本，v-html 和 v-text 没有区别，但对于 HTML 标签就会被 v-html 解析出来
+
</syntaxhighlight>对于普通文本，v-html 和 v-text 没有区别，但对于 HTML 标签就会被 v-html 解析出来<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>v-html 指令</title>
 +
</head>
 +
<body>
 +
    <div id="app">
 +
        <p v-html="content"></p>
 +
        <p v-text="content"></p>
 +
        <p v-html="tagContent"></p>
 +
        <p v-text="tagContent"></p>
 +
    </div>
 +
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
 +
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 +
<script>
 +
    //创建 Vue 实例
 +
    var app = new Vue({
 +
        el:"#app",
 +
        data:{
 +
            content:"hello world",
 +
            tagContent:"<a href='http://www.baidu.com/'>百度</a>"
 +
        }
 +
    })
 +
</script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
 
 +
=== 总结 ===
 +
 
 +
* v-html 指令的作用是：设置元素的 innerHTML
 +
* 内容中有 html 结构会被解析为标签

2023年6月7日 (三) 08:46的版本

https://www.bilibili.com/video/BV12J411m7MG/?p=8

设置标签的 innerHTML

<div id="app">
 <p v-html="content"></p>
</div>

var app = new Vue({
  el:"#app",
  data:{
    content:"<a href='#'>hello world</a>"
  }
})

对于普通文本，v-html 和 v-text 没有区别，但对于 HTML 标签就会被 v-html 解析出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html 指令</title>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
        <p v-html="tagContent"></p>
        <p v-text="tagContent"></p>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //创建 Vue 实例
    var app = new Vue({
        el:"#app",
        data:{
            content:"hello world",
            tagContent:"<a href='http://www.baidu.com/'>百度</a>"
        }
    })
</script>
</body>
</html>

总结

  • v-html 指令的作用是：设置元素的 innerHTML
  • 内容中有 html 结构会被解析为标签
取自“https://www.jihongchang.top/index.php?title=Vue_v-html_指令&oldid=6947”