Vue2.0开发之——Vue基础用法-内容渲染指令(16)

本文介绍了Vue.js中用于内容渲染的三种指令：v-text、插值表达式和v-html。详细解释了每种指令的功能及使用场景，并通过示例代码展示了如何在实际开发中应用这些指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

指令(Directives)是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

vue中的指令按照不同的用途，可以分为如下6大类

内容渲染指令用于辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个：

<body>
    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender">性别：</p>
    </div>
</body>

会覆盖元素内默认的内容

vue提供的插值表达式语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{ {} }语法的专业名称是插值表达式(英文名为：Mustache)

<div id="app">
    <p>姓名：{{username}}</p>
    <p>性别：{{gender}}</p>
</div>

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素。则需要用到v-html这个指令。

<div id="app">
     <p v-html="info"></p>
</div>