Vue2插值操作

本文介绍了Vue2中的六种插值和指令:Mustache语法用于展示数据;v-once指令确保元素只渲染一次;v-html用于插入HTML内容;v-text用于覆盖元素的文本内容;v-pre避免Mustache语法的解析;v-cloak则解决数据加载时的闪烁问题,提供更好的用户体验。

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

1. Mustache语法

mustache是胡须的意思,因为{{}}像胡须,又叫大括号语法。

在vue对象挂载的dom元素中,{{}}不仅可以直接写变量,还可以写简单表达式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mustache的语法</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},啧啧啧</h2>

    <!-- Mustache的语法不仅可以直接写变量,还可以写简单表达式 -->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + " " + lastName}}</h2>
    <h2>{{firstName}}{{lastName}}</h2>
    <h2>{{count * 2}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        firstName:"skt t1",
        lastName:"faker",
        count:100
      }
    })

  </script>
</body>
</html>

2. v-once

v-once表示该dom元素只渲染一次,之后数据改变,不会再次渲染。

  <div id="app">
    <h2>{{message}}</h2>
    <!-- 只会渲染一次,数据改变不会再次渲染 -->
    <h2 v-once>{{message}}</h2>

  </div>

上述{{message}}的message修改后,第一个h2标签数据会自动改变,第二个h2不会

3. v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串,而输出被html自己转化的超链接。此时可以使用v-html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-html指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-html</h2>
    <h2>{{url}}</h2>
    <h2>使用v-html,直接插入html</h2>
    <h2 v-html="url"></h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        url:"<a href='http://www.baidu.com'>百度一下</a>"
      }
    })
  </script>
</body>
</html>

输出结果如下:

 

4. v-text

v-text会覆盖dom元素中的数据,相当于js的innerHTML方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-text指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-text</h2>
    <h2>{{message}},啧啧啧</h2>
    <h2>使用v-text,以文本形式显示,会覆盖</h2>
    <h2 v-text="message">,啧啧啧</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
  </script>
</body>
</html>

如图所示,使用{{message}}是拼接变量和字符串,而是用v-text是直接覆盖字符串内容。

 

5. v-pre

有时候我们期望直接输出{{message}}这样的字符串,而不是被{{}}语法转化的message的变量值,此时我们可以使用v-pre标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-pre指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-pre</h2>
    <h2>{{message}}</h2>
    <h2>使用v-pre,不会解析</h2>
    <h2 v-pre>{{message}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
  </script>
</body>
</html>

结果如图,使用v-pre修饰的dom会直接输出字符串。 

6. v-cloak

有时候因为加载延时问题,例如卡掉了,数据没有及时刷新,就造成了页面显示从{{message}}到message变量“你好啊”的变化,这样闪动的变化,会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前,div属性中有v-cloak这个标签,在vue解析完成之后,v-cloak标签被移除。简单,类似div开始有一个css属性display:none;,加载完成之后,css属性变成display:block,元素显示出来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-cloak指令的使用</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    //在vue解析前,div中有一个属性cloak
    //在vue解析之后,div中没有一个属性v-cloak
    setTimeout(() => {
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊"
        }
      })
    }, 1000);
  </script>
</body>

</html>

这里通过延时1秒模拟加载卡住的状态,结果一开始不显示message的值,div元素中有v-cloak的属性,1秒后显示message变量的值,div中的v-cloak元素被移除。  

### Vue.js 插值语法概述 Vue.js 的插值语法主要用于动态更新 DOM 中的内容。通过双大括号 `{{}}` 将模板内的表达式渲染为最终的 HTML 输出[^2]。 #### 基本用法 最简单的形式是在模板中使用双大括号包裹变量名,从而实现数据绑定: ```html <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }); </script> ``` 上述代码会将 `message` 数据渲染到页面上,显示为 “Hello, Vue!”[^3]。 --- #### 支持 JavaScript 表达式 除了简单地插入变量外,还可以在插值语法中嵌入 JavaScript 表达式。支持的操作包括但不限于字符串拼接、算术运算以及三元条件判断等: ##### 字符串操作 ```html <div id="app"> {{ greeting + ', ' + name }} </div> <script> var app = new Vue({ el: '#app', data: { greeting: 'Hello', name: 'World' } }); </script> ``` 此示例展示了如何通过加号 (`+`) 进行字符串拼接。 ##### 条件逻辑 ```html <div id="app"> {{ isLoggedIn ? userName : 'Guest' }} </div> <script> var app = new Vue({ el: '#app', data: { isLoggedIn: true, userName: 'Alice' } }); </script> ``` 这里利用了三元运算符来决定显示用户名还是默认值 “Guest”。 --- #### 方法调用与复杂计算 可以在插值语句中直接调用定义于 `methods` 或者 `computed` 属性中的函数[^1]。例如: ```html <div id="app"> {{ formatMessage(message) }} </div> <script> var app = new Vue({ el: '#app', data: { message: '原始消息内容' }, methods: { formatMessage(value) { return '[Formatted]' + value.toUpperCase(); } } }); </script> ``` 这段代码演示了一个自定义方法 `formatMessage()` 被用于修改并返回新的字符串。 --- #### 数组与对象解构 对于数组或对象类型的属性也可以轻松处理其内部结构: ```html <div id="app"> Array Example: {{ numbers.join(', ') }}<br/> Object Property Access: {{ user.name }} </div> <script> var app = new Vue({ el: '#app', data: { numbers: [1, 2, 3], user: {name:'John Doe'} } }); </script> ``` 此处分别举例说明了针对数组成员连接成字符串以及获取对象字段的方式。 --- #### 特殊情况——HTML 安全性注意点 需要注意的是,默认情况下所有的插值都会被转义以防止 XSS 攻击风险。如果确实需要注入未经过滤的 HTML,则应改用 `v-html` 指令替代标准插值[^4]: ```html <div id="app"> <!-- 正常插值 --> Safe Content: {{ rawHtml }} <!-- 不安全内容需显式声明 --> Unsafe Content: <span v-html="rawHtml"></span> </div> <script> var app = new Vue({ el: '#app', data: { rawHtml: '<strong>bold text</strong>' } }); </script> ``` 尽管如此,在实际项目开发过程中应当谨慎对待任何可能来自外部输入源的数据以防潜在安全隐患。 --- ### 总结 综上所述,Vue.js 提供了一套强大而灵活的机制允许开发者方便快捷地完成视图层上的各种需求。无论是基本的文字替换还是复杂的业务逻辑呈现均能游刃有余应对。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值