vue指令v-html和v-text

目录

• 1、v-text 文本渲染指令
• 2、 v-html

1、v-text 文本渲染指令

（只能渲染文本不能渲染标签）

<div id="test">

<p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

<script>
const vm = new Vue({

el:"#test",

data:{

message:"<h2>hello vue</h2>"

}

})

</script>

输出结果为：

2、 v-html

(可以渲染指令，可以渲染标签)

<div id="test">

<p v-html="message"></p>

</div>

<script src="./js/vue.js"></script>

<script>

const vm = new Vue({

el:"#test",

data:{

message:"<h2>hello vue</h2>"

}

})

</script>

输出结果为：

到此这篇关于 vue指令v-html和v-text的文章就介绍到这了,更多相关v-html和v-text内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

• Vue指令之 v-cloak、v-text、v-html实例详解
• vue中{{}},v-text和v-html区别与应用详解
• vue中v-text / v-html使用实例代码详解
• vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
• vue学习笔记之指令v-text && v-html && v-bind详解