Vue 中文本输出的三种方法{{}}、v-html、v-text
wwwwzf · zoomla · 2020-02-18 07:41:57 +08:00 · 4104 次点击这是一个创建于 1740 天前的主题，其中的信息可能已经有所发展或是发生改变。
{{ }}
使用{{}}将元素当成纯文本输出，如：
{{Title}}
实现将 Title 字段的数据输出
v-html
v-html 会将元素当成 HTML 标签解析后输出
v-text
v-text 会将元素当成纯文本输出
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue 文本渲染三种方法</title>
</head>
<body>
<div id="app">
<!-- {}}/v-text 不能解析 html 元素，只会照样输出 -->
<p>{{hello}}</p>
<p v-text = 'hello'></p>
<p v-html = 'hello'></p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:'<span>hello world</span>'
}
})
</script>
</html>
运行结果:
 |
1
AngryPanda 2020-02-18 08:33:38 +08:00 via Android
没看到广告，有点失望😄
|
 |
2
LyleRockkk 2020-02-18 08:43:01 +08:00
这是在记笔记吗？
|
 |
3
wunonglin 2020-02-18 10:18:18 +08:00
拿 v2 当笔记本了么？
|
 |
4
anzu 2020-02-18 10:32:42 +08:00
笔记请用本站记事本： https://www.v2ex.com/notes
|
 |
5
stupil 2020-02-28 21:13:02 +08:00
还有 v-pre 啊。
|
Select Language