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

vue快速入门（三）差值表达式

news 2026/2/8 20:51:08

注释很详细，直接上代码

上一篇

新增内容

  1. 插值表达式基本用法
  2. 插值表达式常用公式

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 挂载点 --><div id="root"><!-- 两种方法都可以 --><div>昵称：{{message.nickname}}</div><div>{{'昵称：'+message.nickname}}</div><!-- 多层嵌套 --><div>虚岁:{{message.age}}</div><!-- 运算符 --><div>虚岁x2:{{message.age*2}}</div><div>虚岁x2:{{message.age+message.age}}</div><!-- 三元操作符 --><div>年龄阶段:{{message.age>=18?'成年':'未成年'}}</div><!-- 大写变换 --><div>爱好：{{message.hobby[0].toUpperCase()+' '+message.hobby[1].toUpperCase()}}</div></div><!-- 导入vue的js代码 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据message:{nickname:'眨眼睛',age:38,hobby:['eating','sleeping'],}}})</script>
</body>
</html>

效果演示

在这里插入图片描述
下一篇

相关文章：

vue快速入门（三）差值表达式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 插值表达式基本用法插值表达式常用公式 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…...

编程日记 2024/4/11 3:51:55

RabbitMQ的交换机与队列

一、流程 首先先介绍一个简单的一个消息推送到接收的流程&#xff0c;提供一个简单的图 黄色的圈圈就是我们的消息推送服务&#xff0c;将消息推送到 中间方框里面也就是 rabbitMq的服务器&#xff0c;然后经过服务器里面的交换机、队列等各种关系&#xff08;后面会详细讲&am…...

编程日记 2024/4/11 3:50:54

Spring的 IOC和AOP编程思想

Spring的IOC&#xff08;控制反转&#xff09;编程思想 IOC&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;是Spring框架的核心思想之一。在传统的编程方式中&#xff0c;我们直接通过new关键字来创建对象&#xff0c;并直接调用对象的方法。这种方式下&am…...

编程日记 2024/4/11 3:48:52

Qt中显示hex数据的控件

效果类似QTextEdit&#xff0c;但是显示十六进制的数据&#xff0c;比如用于显示抓取串口或者bin文件的数据等等 chunks.h #ifndef CHUNKS_H #define CHUNKS_H/** \cond docNever *//*! The Chunks class is the storage backend for QHexEdit.** When QHexEdit loads data, C…...

编程日记 2024/4/11 3:47:51

python web 开发 - 常用Web框架

python web 开发 - 文章目录 python web 开发 -1、关于Web开发2、常用Web框架3、开发案例3.1. 使用Flask框架创建一个简单的Web应用程序3.2. 使用tornado框架创建一个简单的Web应用程序3.3. 使用Django框架创建一个简单的待办事项应用程序 4、总结 1、关于Web开发 Web当然是网…...

编程日记 2024/4/11 3:46:49

设计模式——适配器模式06

适配器模式 通常在已有程序中使用&#xff0c;至少有两个类的接口不兼容时&#xff0c;让相互不兼容的类能很好地合作。例如之前系统 用的Target 接口调用&#xff0c;现在要新增第三方接口Adaptee。如何进行适配&#xff0c;面向客户端提供 调用Target接口方式达到使用Adaptee…...

编程日记 2024/4/11 3:45:48

【鸿蒙开发】组件状态管理@Prop，@Link，@Provide，@Consume，@Observed，@ObjectLink

1. Prop 父子单向同步 概述 Prop装饰的变量和父组件建立单向的同步关系&#xff1a; Prop变量允许在本地修改&#xff0c;但修改后的变化不会同步回父组件。当父组件中的数据源更改时&#xff0c;与之相关的Prop装饰的变量都会自动更新。如果子组件已经在本地修改了Prop装饰…...

编程日记 2024/4/11 3:44:47

Web 前端性能优化之八：前端性能检测实践

五、前端性能检测实践 1、常用的检测工具 Lighthouse、Chrome开发者工具中与性能检测相关的一些工具面板、页面加载性能分析工具PageSpeed Insights、专业的性能检测工具WEBPAGETEST等 1、Chrome 任务管理器 通过Chrome任务管理器我们可以查看当前Chrome浏览器中&#xff0…...

编程日记 2024/4/11 3:43:46

安装VMware ESXi虚拟机系统

简介&#xff1a;ESXi是VMware公司开发的一款服务器虚拟化操作系统。它能够在一台物理服务器上运行多个虚拟机&#xff0c;每个虚拟机都可以独立运行操作系统和应用程序&#xff0c;而且对硬件配置要求低&#xff0c;系统运行稳定。 准备工具&#xff1a; 1.8G或者8G以上容…...

编程日记 2024/4/11 3:38:39

Vue3实践之全局请求URL配置和请求参数说明

Vue3实践之全局请求URL配置和请求参数说明 全局请求URL配置 1、首先需要导入router和axios import router from "/router";2、创建app&#xff0c;将router挂载到app上 const app createApp(App) app.use(router).use(elementIcons).mount(#app)3、设置全局请求…...

编程日记 2024/4/11 3:37:38

类和对象—初阶

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 【面试题】 4.2 封装 【面试题】 5.类的作用域 6.类的实例化 7.类对象模型 7.1 如何计算类对象的大小 7.2 类对象的存储方式 7.3 结构体内存对齐规则 【面试题】…...

编程日记 2024/4/11 3:35:35

【Linux】shell 脚本基础使用

在终端中输入命令可以完成一些常用的操作&#xff0c;但是我们都是一条一条输入命令&#xff0c;比较麻烦&#xff0c;为了解决这个问题&#xff0c;就会涉及到 shell 脚本&#xff0c;它可以将很多条命令放到一个文件里面&#xff0c;然后直接运行这个文件即可。 shell 脚本类…...

编程日记 2024/4/11 3:33:33

nfs部署--相关记录

以下是在 CentOS 8 中将 10.40.111.41 上的 /nfsdata 目录通过 NFS 共享到 10.40.111.43 和 10.40.111.45 的 /nfsdata 目录的详细步骤&#xff1a; 在 10.40.111.41 上操作&#xff1a; 安装并配置 NFS 服务器&#xff1a; a. 安装 NFS 服务器软件包&#xff1a; sudo dnf in…...

编程日记 2024/4/11 3:32:32

java国产化云HIS基层医院系统源码 SaaS模式

目录 ​ 云HIS开发环境 功能模块介绍&#xff1a; 1、门诊模块 2、住院模块 3、药房、药库模块 ​编辑 4、电子病历模块 5、统计报表模块 6、系统管理模块 系统优势 云his之电子病历子系统功能 云 his 系统是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按…...

编程日记 2024/4/11 3:31:31

docker 部署 Epusdt - 独角数卡 dujiaoka 的 usdt 支付插件

部署 部署说明 部署之前必须注意的几点事项,该教程不一定适合所有用户: 本教程主要是使用 docker 部署,宝塔用户或宿主机直接安装的用户请直接参考官网教程.本教程是独立部署 epusdt,使用独立的mysql和redis,与dujiaoka项目分开. 在研究的过程中发现 epusdt 也需要用到 mys…...

编程日记 2024/4/11 3:29:29

数据结构排序之冒泡、快速、插入、选择、堆、归并等排序及时间，空间复杂度等（超详解，绝对能满足你的需求，并能学到很多有用知识）

在本文章开始之前给大家介绍个网站，可以通过下面动画网址来理解 ，（国外的网站帮助学习数据结构很多知识，可以翻译下来，在搜索框搜索相应的排序算法进行动画演示，非常好用。）​​​https://www.cs.usfca.edu/~galles/visualization/https://www.cs.usfca.edu/~galles/vis…...

编程日记 2024/4/11 3:25:26

如何在windows环境和linux环境运行jar包

功能:实现对字符串小写转大写 java代码如下: package a_od_test;import java.util.Locale; /* 实现小写转大写 打jar包 分别在windows环境和liunx环境运行*/ public class Main28_To_Upper {public static void main(String[] args) {if (args.length 1) {System.out.printl…...

编程日记 2024/4/11 3:22:23

2602B吉时利2602B数字源表

181/2461/8938产品概述&#xff1a; 2600B系列系统源表SMU仪器是业界领先的电流/电压源和测量解决方案&#xff0c;采用吉时利第三代SMU技术制造。2600B系列提供单通道和双通道型号&#xff0c;将精密电源、真电流源、6-1/2位数字多用表、任意波形发生器、脉冲发生器和电子负载…...

编程日记 2024/4/11 3:21:22

Linux——fork复制进程

1)shell: 在计算机科学中&#xff0c;Shell俗称壳&#xff08;用来区别于核&#xff09;&#xff0c;是指“为使用者提供操作界面”的软件&#xff08;command interpreter&#xff0c;命令解析器&#xff09;。它类似于DOS下的COMMAND.COM和后来的cmd.exe。它接收用户命令&…...

编程日记 2024/4/11 3:20:21

李廉洋：4.10黄金原油晚间走势最新分析及策略。

鉴于美联储官员对1月和2月通胀数据反应不足&#xff0c;3月通胀数据过热可能导致其反应过度的风险更大。美联储试图避免根据一两个数据点来制定政策&#xff0c;但今年迄今为止经济活动的韧性意味着&#xff0c;在年中降息的理由取决于通胀是否恢复自去年下半年以来的稳步下降趋…...

编程日记 2024/4/11 3:19:20

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/1/24 14:16:56

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24