Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue前端入门,第10节 学习v-html,与v-text的区别
1、学习v-html
v-html的目的是更新元素的 innerHTML。
注意:内容不会作为 Vue 模板进行编译,将以 HTML格式进行替换。
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
"text": "Vue前端入门,第9节 v-text的简单学习",
"link": "#34;,
"content": `<a href="#34;>Vue前端入门,第9节 v-text的简单学习</a>`
}
})
</script>
<!-- v-html="content":-->
<h3 v-html="content"></h3>
<h3 v-html="link"></h3>
结果:
需要注意的是:动态渲染 HTML 可能会导致 XSS 攻击 。
2、与v-text的区别
v-text:将获取到对应的内容,并清空原内容,输出的格式是纯文本。
v-html:将获取到对应的内容,并清空原内容,如果是内容的是文本内容,那么输出的格式是纯文本;如果内容包含html内容,那么将以html进行解析输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind:href="link" -->
<h3><a v-bind:href="link">{{ text }}</a></h3>
<!-- {{content}} -->
<h3>{{ content }}</h3>
<h3>{{ link }}</h3>
<!-- v-html="content":-->
<h3 v-html="content"></h3>
<h3 v-html="link"></h3>
<!-- v-text="content":-->
<h3 v-text="content"></h3>
<h3 v-text="link"></h3>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
"text": "Vue前端入门,第9节 v-text的简单学习",
"link": "#34;,
"content": `<a href="#34;>Vue前端入门,第9节 v-text的简单学习</a>`
}
})
</script>
</body>
</html>