vue的那些插值操作

最新推荐文章于 2024-02-01 17:54:39 发布

睡不醒的蜜蜂

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量419

点赞数

分类专栏：菜鸟笔记文章标签： vue

本文链接：https://blog.csdn.net/cdyun1012/article/details/112075942

版权

这篇笔记详细介绍了Vue的插值操作，包括mustache语法、v-once、v-html、v-pre和v-cloak指令。通过样例演示，展示了如何在DOM中插入变量值、富文本渲染、避免原始代码显示以及优化初始加载效果。

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

vue的那些插值操作

1.简介
2.什么是插值操作和mustache语法
3.插值操作总览表
4. 样例演示

1.简介

该笔记主要记录vue常用的插值操作和mustache操作，对这些插值操作做一些对比比较，方便参考使用。

2.什么是插值操作和mustache语法

将指定的值插入到指定的dom元素中，就叫做插值操作，比如将用户名写入一个指定的span中。
mustache语法：在vue中经常看到的{ {varName}}这种形式的表达方式，就是mustache语法。（具体介绍请参考其他文章，这里不做详细描述）

3.插值操作总览表

计算语法	使用场景	注意事项
普通{ {}}	显示简单的或者固定的值	尽量不要用于显示需要大量计算的值
v-once	当某一个值只需要显示初始状态值，并且不希望动态被修改的时候就可以使用该指令	v-once指令只需要写到指定的dom标签中即可，后面不带其他表达式
v-html	用于插入需要被浏览器渲染的html代码块	v-html指令写在dom标签中并且指定对应的变量值
被抛弃的v-text	v-text的作用和{ {varName}}作用相同	因为v-text没有{ {varName}}灵活，不能进行运算或拼接，所以一般不使用
v-pre	将标签中的内容原原本本的展示出来，主要用于展示代码块信息	参考html5的pre标签
v-cloak	用于处理在vue解析之前的时候做的事情	需要定义v-cloak相关的样式

4. 样例演示

4.1 插值操作之{ {varName}}

这种直接使用mustache语法将某一个变量值插入到一个dom中的做法，就是最基本的插值操作。varName是data中的某一个已经存在的变量名(比较简单，这里就不做代码演示)。
此外，因为mustache语法中引用的是js的变量，所以在mustache表达式中，也可以做一些js一样的简单运算，比如：{ {var1 + va2}} 就会按照js的方式进行计算并返回显示。

4.2 插值操作之v-once指令

说明信息见总览表，这给出一个演示代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{
  {msg}}</h2>
        <!-- 因