概述

v-html主要是用来渲染富文本内容，比如评论信息，新闻信息，文章信息等。

v-服务器托管网html是一个特别不安全的指令，因为它会将文本以HTML的显示进行渲染，一旦文本里面包含一些恶意的js代码，可能会导致整个网页发生崩溃。

不过，v-html在渲染富文本的场景中，有着非常大的优势，所以在一些博客网站项目中，经常能够看到这个指令的出现。

基本用法

我们创建src/components/Demo10.vue，在这个组件中，我们要分别渲染以下情形的HTML内容：

• 场景1：纯文本内容
• 场景2：比较简单的HTML内容
• 场景3：包含CSS样式的HTML内容
• 场景4：包含JS脚本的HTML内容
• 场景5：包含CSS+JS的HTML内容

代码如下：

script setup>
const s1="你好，张大鹏"
const s2="
你好，张大鹏
"
const s3="
你好，张大鹏
"
script>
template>
  div>纯文本：span v-html="s1">span>div>
  div>比较简单的HTML内容：div v-html="s2">div>div>
  div>包含CSS样式的HTML内容：div v-html="s3">div>div>
  div>包含JS脚本的HTML内容：div v-html="`console.log('你好，张大鹏')`">div>div>
  div>包含CSS样式+JS脚本的HTML内容：div v-html="`${s3}console.log('你好，张大鹏')`">div>div>
template>

接着，我们修改src/App.vue，引入Demo10.vue并进行渲染：

script setup>
import Demo from "./components/Demo10.vue"
script>
template>
  h1>欢迎跟着Python私教一起学习Vue3入门课程h1>
  hr>
  Demo/>
template>

然后，我们浏览器访问：http://localhost:5173/

完整代码

package.json

{
  "name": "hello",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "vite": "^5.0.0"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

index.html

doctype html>
html lang="en">
  head>
    meta charset="UTF-8" />
    link rel="icon" type="image/svg+xml" href="/vite.svg" />
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    title>Vite + Vuetitle>
  head>
  body>
    div id="app">div>
    script type="module" src="/src/main.js">script>
  body>
html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

script setup>
import Demo from "./components/Demo10.vue"
script>
template>
  h1>欢迎跟着Python私教一起学习Vue3入门课程h1>
  hr>
  Demo/>
template>

src/components/Demo10.vue

script setup>
const s1="你好，张大鹏"
const s2="
你好，张大鹏
"
const s3="
你好，张大鹏
"
script>
template>
  div>纯文本：span v-html="s1">span>div>
  div>比较简单的HTML内容：div v-html="s2">div>div>
  div>包含CSS样式的HTML内容：div v-html="s3">div>div>
  div>包含JS脚本的HTML内容：div v-html="`console.log('你好，张大鹏')`">div>div>
  div>包含CSS样式+JS脚本的HTML内容：div v-html="`${s3}console.log('你好，张大鹏')`">div>div>
template>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

服务器托管，北京服务器托管服务器托管网，服务器租用 http://www.fwqtg.net

相关推荐: AnimatedList 实现动态列表

AnimatedList实现动画 AnimatedList 和 ListView 的功能大体相似，不同的是， AnimatedList 可以在列表中插入或删除节点 时执行一个动画，在需要添加或删除列表项的场景中会提高用户体验。 AnimatedList 是一个…