vue 花括号里面的变量_vue学习记录1

最新推荐文章于 2023-12-27 19:03:37 发布

weixin_39721009

最新推荐文章于 2023-12-27 19:03:37 发布

阅读量922

点赞数

文章标签： vue 花括号里面的变量

本文记录了Vue中的插值操作，重点介绍了Mustache语法、v-once指令、v-html、v-text以及v-cloak的用法。Mustache用于直接输出变量或表达式；v-once确保元素只渲染一次，后续数据变动不再更新；v-html用于显示HTML内容而非纯文本；v-text用于替换元素内部文本；v-cloak则用于避免Vue加载时的闪烁现象，提供更好的用户体验。

摘要由CSDN通过智能技术生成

插值操作

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>
    c