前端学习（1182）:差值表达式

最新推荐文章于 2021-07-27 23:04:53 发布

前端小歌谣

最新推荐文章于 2021-07-27 23:04:53 发布

阅读量1.7k

点赞数

分类专栏： # 歌谣--前端学习--总进程 # 歌谣---前端学习--vue

本文链接：https://blog.csdn.net/weixin_43392489/article/details/105801465

版权

本文介绍了Vue框架中的差值表达式{{}}，它是一种指令，用于在模板中展示数据。需要注意的是，插值表达式内不可写代码片段，否则会导致错误。此外，属性节点不支持插值表达式，若需动态绑定属性，需使用v-bind，相关内容将在后续文章中讲解。

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

插值表达式语法：{ {}}

使用时请注意以下几点：

插值表达式是vue框架提供的【指令】
插值表达式中不可以写代码片段会报错
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性（下篇文章讲）

代码演示：

<!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>Document</title>
    <!-- 1.导入包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.添加id为app的div，将来要被vue控制-->
    <div id="app">
        <!-- 注意 这是{
  {}} 其实是vue框架提供的【指令】 -->
        <!-- {
  {}} 语法 叫做 插值表达式 -->
        <p>{
  {msg}}</p>