{{xxx}}
使用{{}}将元素当成纯文本输出,如: {{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>
运行结果
<span>hello world</span>
<span>hello world</span>
hello world
标题:Vue内容输出的三种方法{{}}、v-html、v-text
分类:Vue
链接:https://www.aqwdzy.com/content/142
版权:通天技术网(www.aqwdzy.com)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉