Vue插值：双大括号标签、v-text、v-html、v-bind 指令

原创

已于 2025-03-25 19:27:47 修改 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-08-20 15:58:34 首次发布

Vue 指令系列文章：

《Vue插值：双大括号标签、v-text、v-html、v-bind 指令》

《Vue指令：v-cloak、v-once、v-pre 指令》

《Vue条件判断：v-if、v-else、v-else-if、v-show 指令》

《Vue循环遍历：v-for 指令》

《Vue事件处理：v-on 指令》

《Vue表单元素绑定：v-model 指令》

《Vue动态绑定：文本框、单选按钮、下拉列表、多选按钮》

《Vue动态添加或删除DOM元素：购物车实例》

创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取 DOM 的值，使代码更加简洁，提高了开发效率。

1、双大括号标签：文本插值

1.1 基本形式

文本插值是数据绑定最基本的形式，使用的是双大括号{ { }}标签。它会自动将绑定的事件实时显示出来。

【实例】使用的是双大括号{ { }}标签，将文本插入到HTML标签中。

<body>
    <div id="app">
        <h3>{
  
  {title}}</h3>
        <p>用户ID：{
  
  {userInfo.userId}}</p>
        <p>用户名称：{
  
  {userInfo.userName}}</p>
        <p>博客信息：{
  
  {userInfo.blogName}}</p>
        <p>博客地址：{
  
  {userInfo.blogUrl}}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "使用双大括号{
  
  { }}表达式，实现文本插值",
                use