本次主要介绍Vue的基本指令：v-htlm
使用工具：HbuilderX
v-html怎么用？
上一篇说到，v-text 是一个填充文本的指令，用于设置元素的文本内容。v-html也是一个填充文本的指令，但它俩有点不同，看v-html自带html就知道肯定和html有关。直接看代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdnWebPage</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id='app'>
<div v-text='desc'></div>
<div v-html='desc'></div>
</div>
<script>
var csdnWeb = {
data() {
return {
desc: '<h1>这是一段描述信息</h1>'
}
}
}
var app = Vue.createApp(csdnWeb)
app.mount('#app')
</script>
</body>
</html>
总结一下：
v-text：原来是纯文本，浏览器就显示纯文本；（那如果v-text标签中间带了插值表达式，是否会解析呢？）
v-html：原来是什么，浏览器给过滤一遍，如果有自家标签（HTML标签）就给翻译一遍再展示。即会解析HTML
下一篇：v-pre是什么？
扫一扫
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
