电商网站建设费用价格,网站如何备份,wordpress主题 设定,线上营销手段概述
v-html主要是用来渲染富文本内容#xff0c;比如评论信息#xff0c;新闻信息#xff0c;文章信息等。
v-html是一个特别不安全的指令#xff0c;因为它会将文本以HTML的显示进行渲染#xff0c;一旦文本里面包含一些恶意的js代码#xff0c;可能会导致整个网页发…概述
v-html主要是用来渲染富文本内容比如评论信息新闻信息文章信息等。
v-html是一个特别不安全的指令因为它会将文本以HTML的显示进行渲染一旦文本里面包含一些恶意的js代码可能会导致整个网页发生崩溃。
不过v-html在渲染富文本的场景中有着非常大的优势所以在一些博客网站项目中经常能够看到这个指令的出现。
基本用法
我们创建src/components/Demo10.vue在这个组件中我们要分别渲染以下情形的HTML内容
场景1纯文本内容场景2比较简单的HTML内容场景3包含CSS样式的HTML内容场景4包含JS脚本的HTML内容场景5包含CSSJS的HTML内容
代码如下
script setup
const s1你好张大鹏
const s2h1你好张大鹏/h1
const s3h1 stylecolor: red你好张大鹏/h1
/script
templatediv纯文本span v-htmls1/span/divdiv比较简单的HTML内容div v-htmls2/div/divdiv包含CSS样式的HTML内容div v-htmls3/div/divdiv包含JS脚本的HTML内容div v-htmlscriptconsole.log(你好张大鹏)/script/div/divdiv包含CSS样式JS脚本的HTML内容div v-html${s3}scriptconsole.log(你好张大鹏)/script/div/div
/template接着我们修改src/App.vue引入Demo10.vue并进行渲染
script setup
import Demo from ./components/Demo10.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/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-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
script setup
import Demo from ./components/Demo10.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/templatesrc/components/Demo10.vue
script setup
const s1你好张大鹏
const s2h1你好张大鹏/h1
const s3h1 stylecolor: red你好张大鹏/h1
/script
templatediv纯文本span v-htmls1/span/divdiv比较简单的HTML内容div v-htmls2/div/divdiv包含CSS样式的HTML内容div v-htmls3/div/divdiv包含JS脚本的HTML内容div v-htmlscriptconsole.log(你好张大鹏)/script/div/divdiv包含CSS样式JS脚本的HTML内容div v-html${s3}scriptconsole.log(你好张大鹏)/script/div/div
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
