当前位置： 首页 > news >正文

插值表达式 {{}}

news 2026/3/31 21:08:12

前言

持续学习总结输出中，今天分享的是插值表达式 {{}}

Vue插值表达式是一种Vue的模板语法，我们可以在模板中动态地用插值表达式渲染出Vue提供的数据绑定到视图中。插值表达式使用双大括号{{ }}将表达式包裹起来。

1.作用：

利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

如：以下的情况都是表达式

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>插值表达式</title>
</head>
<body>
<div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.desc }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱学习 Vue'}}})
</script>
</body>
</html>

运行结果：
请添加图片描述

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.总结

  1. 插值表达式的作用是什么?
    利用表达式进行插值，将数据渲染页面中
  2. 语法格式?
    {{ 表达式 }}
  3. 插值表达式的注意点:
    1、使用的数据要存在 (data)
    2、支持的是表达式，而非语句 if … for
    3、不能在标签属性里面使用

最后分享一句话：

生活的最好状态是冷冷清清的风风火火。
——木心

本次的分享就到这里了！！！

相关文章：

插值表达式 {{}}

前言 持续学习总结输出中&#xff0c;今天分享的是插值表达式 {{}} Vue插值表达式是一种Vue的模板语法&#xff0c;我们可以在模板中动态地用插值表达式渲染出Vue提供的数据绑定到视图中。插值表达式使用双大括号{{ }}将表达式包裹起来。 1.作用&#xff1a; 利用表达式进行…...

编程日记 2023/11/5 13:58:19

白雪公主

前言 #define 皇后 王后 在很久很久以前&#xff0c;有一个国王&#xff0c;由于王后难产致死&#xff0c;导致生下的孩子没母,由于缺爱&#xff0c;变的非常的刻薄 由于公主过于刻薄&#xff0c;以至于见到她的人都面色煞白感到空中飘雪 37C 的嘴怎能说出如此刻薄的话语。为了…...

编程日记 2023/11/5 13:54:14

宏观角度认识递归之合并两个有序链表

21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; 依旧是利用宏观角度来看待问题&#xff0c;其中最主要的就是要找到重复的子问题&#xff1b; 题目中要求把两个有序链表进行合并&#xff0c;同时不能够创建新的节点&#xff0c;并返回链表的起始点&#xff1a;因…...

编程日记 2023/11/5 13:52:12

Leetcode-509 斐波那契数列

使用循环 class Solution {public int fib(int n) {if(n 0){return 0;}if(n 1){return 1;}int res 0;int pre1 1;int pre2 0;for(int i 2; i < n; i){res pre1 pre2;pre2 pre1;pre1 res;}return res;} }使用HashMap class Solution {private Map<Integer,Int…...

编程日记 2023/11/5 13:51:10

解密 docker 容器内 DNS 解析原理

背景 这几天在使用 docker 中&#xff0c;碰到了在容器中 DNS 解析的一些问题。故花些时间弄清了原理&#xff0c;写此文章分享。 1. docker run 命令启动的容器 以启动一个 busybox 容器为例&#xff1a; rootubuntu20:~# docker run -itd --name u1 busybox 63b59ca8aeac…...

编程日记 2023/11/5 13:50:09

故障诊断模型 | Maltab实现SVM支持向量机的故障诊断

效果一览 文章概述 故障诊断模型 | Maltab实现SVM支持向量机的故障诊断 模型描述 Chinese: Options：可用的选项即表示的涵义如下 　　-s svm类型：SVM设置类型(默认0) 　　0 – C-SVC 　　1 --v-SVC 　　2 – 一类SVM 　　3 – e -SVR 　　4 – v-SVR 　　-t 核函数类型：核函…...

编程日记 2023/11/5 13:48:07

开源的网站数据分析统计平台——Matomo

Matomo 文章目录 Matomo前言一、环境准备1. 整体安装流程2.安装PHP 7.3.303.nginx配置4.安装matomo4.1 访问安装页面 http://192.168.10.45:8088/index.php4.2 连接数据库4.3 设置管理员账号4.4 生成js跟踪代码4.5 安装完成4.6 警告修改4.7 刷新页面&#xff0c;就可以看到登陆…...

编程日记 2023/11/5 13:47:06

linux入门到地狱

linux—001入门 IT圈必备(前端工作者用的比较少) 老旧电脑跑linux不容易卡 我代码没保存windows闪退&#xff0c;僵停(vs2019卡掉线)&#xff0c;重启更新,占用cpu内存服务报错pip各种bug 出来生态环境友好其他的全是bug(bug时间成本超过了windows快捷友好生态) 那就说明wind…...

编程日记 2023/11/5 13:46:04

架构”4+1“视图

1995年Kruchten提出了著名的“41”视图&#xff0c;用来描述软件系统的架构。在“41”视图中&#xff0c;&#xff08;物理视图 &#xff09;用来描述系统软硬件之间的映射关系&#xff0c;这个视图往往&#xff08;系统工程人员&#xff09;最为关注&#xff1b;&#xff08;逻…...

编程日记 2023/11/5 13:45:03

『精』Vue 组件如何模块化抽离Props

『精』Vue 组件如何模块化抽离Props 文章目录 『精』Vue 组件如何模块化抽离Props一、为什么要抽离Props二、选项式API方式抽离三、组合式API方式抽离3.1 TypeScript类型方式3.2 文件分离方式3.3 对文件分离方式优化 参考资料&#x1f498;推荐博文&#x1f357; 一、为什么要抽…...

编程日记 2023/11/5 13:44:02

JavaScript字符串字面量详细解析与代码实例

JavaScript字符串字面量是一种表示字符串值的语法结构&#xff0c;通常用双引号或单引号括起来。 var str1 "Hello World!"; var str2 Hello World!;另外&#xff0c;如果需要在字符串中包含双引号或单引号&#xff0c;可以使用转义字符\来实现。 var str3 &quo…...

编程日记 2023/11/5 13:43:01

Android java Handler sendMessage使用Parcelable传递实例化对象，我这里传递Bitmap 图片数据

一、Bundle给我们提供了一个putParcelable(key,value)的方法。专门用于传递实例化对象。 二、我这里传递Bitmap 图片数据&#xff0c;实际使用可以成功传统图像数据。 发送&#xff1a;Bundle bundle new Bundle();bundle.putParcelable("bitmap",bitmap);msg.setD…...

编程日记 2023/11/5 13:41:59

CTF工具PDF隐写神器wbStego4open安装和详细使用方法

wbStego4open安装和详细使用方法 1.wbStego4open介绍&#xff1a;2.wbStego4open下载&#xff1a;3.wbStego4open原理图&#xff1a;4.wbStego4open使用教程&#xff1a;第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;第四步&#xff1a;第五步&#xff1a; 5.wbSteg…...

编程日记 2023/11/5 13:40:58

docker镜像使用

一、查看docker版本 docker version docker默认安装目录 /var/lib/docker 目录文件如下&#xff1a; 二、查看下载的镜像 docker images 三、下载镜像 docker pull [OPTIONS] NAME[:TAG|DIGEST] option作用-a, --all-tags拉取所有 tagged 镜像–disable-content-trust…...

编程日记 2023/11/5 13:39:57

【Git】git的下载安装与使用

目录 目录 一.下载安装 官方下载 淘宝镜像下载 安装 二.创建本地仓库 三.git的基本操作命令 git status git add . git commit -m " " 四.gitee(码云&#xff09;的使用 配置ssh公钥 ​编辑 查看公钥 gitee创建仓库 将本地仓库的文件上传到远程仓库…...

编程日记 2023/11/5 13:38:56

R语言中的函数27：polynom::polynomial(), deriv(),integral()，solve()多式处理函数

文章目录 介绍polynomial()用法参数实例多项式的加减乘除等运算实例 deriv()和integral()用法参数实例solve()参数实例 介绍 R语言中的polynom包可以实现对多项式的操作&#xff0c;例如&#xff1a;加、减、乘、除、微分、积分。使用的时候先用polynomial()函数定义一个多项式…...

编程日记 2023/11/5 13:37:55

基于STM32CubeMX和keil采用USART/UART实现非中断以及中断方式数据回环测试借助CH340以及XCOM

文章目录 前言1. 接口概述1.1 USART/UART接口1.2 串口通信参数1.3 波特率计算 2. 传输函数3. 回环测试3.1 上位机环境配置3.2 阻塞模式3.3 中断模式 4. STM32CubeMX配置4.1 时钟配置4.2 调试配置4.3 串口引脚配置4.4 工程配置 5. 测试效果6. 不借助上位机回环测试总结 前言 这…...

编程日记 2023/11/5 13:36:54

Spring cloud负载均衡 @LoadBalanced注解原理

接上一篇文章&#xff0c;案例代码也在上一篇文章的基础上。 在上一篇文章的案例中&#xff0c;我们创建了作为Eureka server的Eureka注册中心服务、作为Eureka client的userservice、orderservice。 orderservice引入RestTemplate&#xff0c;加入了LoadBalanced注解&#x…...

编程日记 2023/11/5 13:34:52

C#when关键字

在C#中&#xff0c;when关键字用于在模式匹配表达式中添加条件。它允许您在模式匹配的过程中指定额外的条件&#xff0c;以进一步过滤匹配的模式。当模式匹配和附加条件都为真时&#xff0c;相关的代码块将被执行。 以下是when关键字的详细解释以及示例说明&#xff1a; 语法…...

编程日记 2023/11/5 13:32:49

华为政企无线局域网产品集

产品类型产品型号产品说明 室内接入点AirEngine 5760-51AirEngine 5760-51是华为发布的支持Wi-Fi 6&#xff08;802.11ax&#xff09;标准的新一代室内AP&#xff0c;适合部署在企业办公、零售、制造等场景。 通过软件定义射频&#xff0c;能够在双频、三频模式灵活切换&a…...

编程日记 2023/11/5 13:31:48

Pixel Epic动态卷轴技术揭秘：TextIteratorStreamer流式输出实现原理与调优

Pixel Epic动态卷轴技术揭秘&#xff1a;TextIteratorStreamer流式输出实现原理与调优 1. 引言&#xff1a;像素史诗的独特体验 Pixel Epic&#xff08;像素史诗&#xff09;作为一款研究报告辅助终端&#xff0c;最引人注目的特点莫过于其独特的"动态卷轴"输出效果…...

编程新知 2026/3/31 20:11:48

从‘梯度裁剪’到‘权重初始化’：一份预防梯度爆炸的PyTorch/TensorFlow实操清单

从‘梯度裁剪’到‘权重初始化’&#xff1a;一份预防梯度爆炸的PyTorch/TensorFlow实操清单 训练深度神经网络时&#xff0c;梯度爆炸问题就像一颗定时炸弹——它可能在你最意想不到的时候突然引爆&#xff0c;导致损失函数值瞬间变为NaN&#xff0c;或者权重更新出现剧烈震荡…...

编程新知 2026/3/31 19:43:26

电视盒子播放卡顿？教你一招解决所有格式难题

电视盒子播放卡顿&#xff1f;教你一招解决所有格式难题 【免费下载链接】TVBoxOSC TVBoxOSC - 一个基于第三方项目的代码库&#xff0c;用于电视盒子的控制和管理。 项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC 一、破解家庭娱乐的格式困局 你是否也曾…...

编程新知 2026/3/31 19:04:26

Turbo Boost Switcher设备适配完全指南：从系统要求到机型验证全流程

Turbo Boost Switcher设备适配完全指南&#xff1a;从系统要求到机型验证全流程 【免费下载链接】Turbo-Boost-Switcher Turbo Boost disabler / enable app for Mac OS X 项目地址: https://gitcode.com/gh_mirrors/tu/Turbo-Boost-Switcher Turbo Boost Switcher是一款…...

编程新知 2026/3/31 18:50:18

打字侠全面支持三大五笔输入法：初学者快速上手指南

1. 五笔输入法&#xff1a;为什么值得初学者投入时间&#xff1f; 在拼音输入法大行其道的今天&#xff0c;很多初学者可能会疑惑&#xff1a;为什么要花时间学习看起来更复杂的五笔输入法&#xff1f;其实答案很简单——效率。我十年前刚开始接触五笔时也有同样的困惑&#xf…...

编程新知 2026/3/31 16:26:14

AgentCPM-Report研报系统实操：Pixel Epic贤者响应延迟优化教程

AgentCPM-Report研报系统实操&#xff1a;Pixel Epic贤者响应延迟优化教程 1. 认识Pixel Epic智识终端 Pixel Epic是一款基于AgentCPM-Report大模型构建的创新研究报告辅助系统。与传统AI工具不同&#xff0c;它将枯燥的科研过程转化为一场像素风格的RPG冒险。在这个系统中&a…...

编程新知 2026/3/31 13:06:42

DeepSeek-V3 vs V3-Base：开发者如何根据项目需求选择最适合的模型？

DeepSeek-V3 vs V3-Base&#xff1a;开发者如何根据项目需求选择最适合的模型&#xff1f; 当你在GitHub上搜索代码补全工具&#xff0c;或是在Kaggle上寻找数学竞赛的解题思路时&#xff0c;可能会被各种AI模型的选择搞得眼花缭乱。作为开发者&#xff0c;我们需要的不是"…...

编程新知 2026/3/31 12:52:28

AI大模型时代：微店商品数据API如何重构反向海淘决策

在AI大模型时代&#xff0c;微店商品数据API凭借覆盖下沉市场、小众货源、私域供给的独特优势&#xff0c;成为重构反向海淘决策的核心支撑&#xff0c;将传统“人工经验判断”升级为“数据采集→AI分析→自动决策→反馈优化”的全链路数据驱动模式&#xff0c;大幅提升选品精准…...

编程新知 2026/3/31 12:39:58

zynq7020 u-boot 外设配置实战指南

1. Zynq7020 U-Boot外设配置概述 在嵌入式系统开发中&#xff0c;U-Boot作为系统启动加载器扮演着关键角色。对于Xilinx Zynq-7020平台来说&#xff0c;正确配置U-Boot外设是确保系统正常启动和运行的基础。本文将重点介绍网口、QSPI Flash和eMMC这三个核心外设的配置方法。 为…...

编程新知 2026/3/31 11:07:07

网络基础知识整理（精简通用版）20260331-001篇

文章目录 网络基础知识整理（精简通用版） 一、网络基本概念 二、网络拓扑结构 三、OSI 七层模型（核心参考） 四、TCP/IP 模型（实际互联网标准） 五、IP 地址基础 六、传输层协议（TCP vs UDP） TCP（传输控制协议） UDP（用户数据报协议） 七、常见网络协议与端口 八、网络设…...

编程新知 2026/3/31 10:40:53