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

vue简单使用二（循环）

news 2026/2/10 16:25:37

目录

     属性绑定

     if判断：

     for循环：

属性绑定

      代码的形式来说明

     三元表达式的写法：

if判断：

for循环：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="js/vue.js"></script><title>Title</title><style>.one{background: pink;width: 100px;height: 100px;text-align: center;line-height: 100px;}</style>
</head>
<body><div class="vuePro"><!-- 属性绑定 --><div :class="isOne">属性绑定</div><!-- 三元表达式 --><div :class="num == 2 ? 'one':''">属性绑定</div><!-- if判断 --><div><div v-if="price >= 10000">超有钱</div><div v-if="price < 10000 && price >= 1000">有钱</div><div v-if="price < 1000">普通</div></div><ul><li v-for="(item,index) in list" :key="index">{{item.name}}</li></ul></div>
</body>
<script>new Vue({el:".vuePro",data:{isOne:"one",num:1,price:50000,list:[{id:1,name:"张三"},{id:2,name:"李四"},{id:3,name:"王五"}]}});
</script>
</html>

相关文章：

vue简单使用二（循环）

目录 属性绑定 if判断&#xff1a; for循环&#xff1a; 属性绑定 代码的形式来说明 三元表达式的写法&#xff1a; if判断&#xff1a; for循环&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"…...

编程日记 2024/4/14 19:39:23

JavaScript入门--变量

JavaScript入门--变量 一、JS变量二、变量命名三、常量四、局部变量 一、JS变量 定义变量a, b, c&#xff0c;并输出到控制台。 var a 1; var b 13.14; var c hello Js;console.log(a, b, c) //console.log()语句用于输出结果到控制台&#xff0c;类似python的print语句…...

编程日记 2024/4/14 19:37:20

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…...

编程日记 2024/4/14 19:36:19

用AI的视角看世界

前言 2024年将是Ai人工智能在各个行业垂直领域发展的元年。 随着2022年11月openai 的大语言模型chatgpt3.5的诞生&#xff0c;已经预示着互联网时代&#xff0c;移动互联网时代即将迎来新的变革&#xff0c;也预示着web3.0和元宇宙更近了一步。 回顾历史&#xff0c;互联网的…...

编程日记 2024/4/14 19:35:18

MATLAB 自定义实现点云法向量和曲率计算（详细解读）（64）

MATLAB 自定义实现点云法向量和曲率计算（详细解读）（64） 一、算法介绍二、算法步骤三、算法实现1.代码 （完整，注释清晰，可直接用）2.结果一、算法介绍 首先说明： ------这里代码手动实现，不调用matlab提供的法向量计算接口，更有助于大家了解法向量和曲率的计算方法，…...

编程日记 2024/4/14 19:33:16

拯救鲨鱼！Helping wireshark！wireshark未响应解决方法

前言 做题的的时候 在用wireshark解密tls秘钥的时候 我的小鲨鱼突然未响应了 然后我多次尝试无果 并且殃及池鱼 我电脑上所有的流量包都打不开了&#xff1f;&#xff01;&#xff01;&#xff01; 于是乎 尝试删了重下 还是未响应 开始怀疑电脑 重启电脑两次 还是打…...

编程日记 2024/4/14 19:32:15

设计模式之责任链讲解

责任链模式适用于需要将请求和处理解耦的场景&#xff0c;同时又需要动态地组织处理逻辑的场景。 通过使用责任链模式&#xff0c;可以实现请求的动态处理、灵活的扩展和简化的代码编写&#xff0c;提高系统的可维护性和可扩展性。 一、责任链入门 以下这是GPT生成的责任链代…...

编程日记 2024/4/14 19:31:14

K8s: 将一个节点移出集群和相关注意事项

前置步骤 在Kubernetes集群中&#xff0c;要移出一个节点&#xff0c;你需要执行以下步骤&#xff1a; 1 &#xff09;将节点标记为不可调度 首先&#xff0c;你需要将目标节点标记为不可调度&#xff0c;以确保Kubernetes不会在该节点上调度新的Pod这可以通过执行以下命令实…...

编程日记 2024/4/14 19:29:12

Python学习笔记24 - 学生信息管理系统

1. 需求分析 2. 系统设计 3. 系统开发必备 4. 主函数设计 5. 学生信息维护模块设计 a. 录入学生信息 b. 删除学生信息 c. 修改学生信息 d. 查询学生信息 e. 统计学生总人数 f. 显示所有学生信息 g. 排序模块设计 6. 项目打包...

编程日记 2024/4/14 19:27:09

【物联网应用案例】某制造企业电锅炉检测项目

供暖行业在我国的经济发展中占据着重要的地位&#xff0c;然而&#xff0c;长期以来&#xff0c;该行业存在着自动化水平低、管理效率不高等问题&#xff0c;制约了其持续发展。为了解决这些问题&#xff0c;吉林某电锅炉生产厂家进行了一项创新性的尝试。 该厂家通过集成物联…...

编程日记 2024/4/14 19:24:07

设计模式实践

结合设计模式概念和在java/spring/spring boot中的实战&#xff0c;说明下列设计模式。 一、工厂模式 这里只讲简单工厂模式&#xff0c;详细的可以参考Java工厂模式&#xff08;随笔&#xff09;-CSDN博客。工厂类会根据不同的参数或条件来决定创建哪种对象&#xff0c;这样…...

编程日记 2024/4/14 19:23:05

嵌入式学习52-ARM1

知识零散&#xff1a; 1.flash&#xff1a; nor flash 可被寻地址 …...

编程日记 2024/4/14 19:22:04

Java（MySQL基础）

数据库相关概念 MySOL数据库 关系型数据库(RDBMS) 概念: 建立在关系模型基础上&#xff0c;由多张相互连接的二维表组成的数据库。特点: 使用表存储数据&#xff0c;格式统一&#xff0c;便于维护使用SQL语言操作&#xff0c;标准统一&#xff0c;使用方便 SQL SOL通用语法…...

编程日记 2024/4/14 19:21:03

预约系统的使用

预约系统的使用 目录概述需求&#xff1a; 设计思路实现思路分析1.用户年规则 在 预约系统中的使用流程 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wa…...

编程日记 2024/4/14 19:20:02

酷开科技OTT大屏营销：开启新时代的营销革命

随着互联网技术的不断发展和普及&#xff0c;大屏已经成为越来越多家庭选择的娱乐方式。在这个背景下&#xff0c;酷开科技凭借其强大的技术实力和敏锐的市场洞察力&#xff0c;成功地将大屏转化为一种新的营销渠道&#xff0c;为品牌和企业带来了前所未有的商业机会。 酷开科技…...

编程日记 2024/4/14 19:18:00

网络安全（防火墙，IDS，IPS概述）

问题一：什么是防火墙，IDS，IPS？ 防火墙是对IP：port的访问进行限制，对访问端口进行制定的策略去允许开放的访问，将不放开的端口进行拒绝访问，从而达到充当防DDOS的设备。主要是拒绝网络流量，阻断所有不希望出现的流程，禁止数据流量流通，达到安全防护的作用。如将一些恶…...

编程日记 2024/4/14 19:15:57

安装IntelliJ IDEA插件教程

安装IntelliJ IDEA插件&#xff1a;一份详细指南 在提升IntelliJ IDEA开发效率的过程中&#xff0c;插件扮演着不可或缺的角色。它们为IDE提供了额外的功能和工具&#xff0c;以满足开发者在特定编程语言、框架、测试、版本控制等方面的个性化需求。本文将为您详细阐述如何在I…...

编程日记 2024/4/14 19:11:53

大厂基础面试题（之四）

Q1&#xff1a;请先进行自我介绍 Q2&#xff1a;说下你学习前端的详细过程 Q3&#xff1a;一个页面从url输入到显示页面的整个过程 1.URL解析 2.DNS解析 3.建立TCP连接 4.发起HTTP请求 5.服务器处理请求 6.返回HTTP响应 7.下载页面资源 8.解析和渲染页面 9.JavaScript执行 10…...

编程日记 2024/4/14 19:10:52

为什么我们应该切换到Rust

What is RUST? 什么是Rust&#xff1f; Rust is a programming language focused on safety, particularly safe concurrency, supporting functional and imperative-procedural paradigms. Rust is syntactically similar to C, but it provides memory safety without usi…...

编程日记 2024/4/14 19:09:49

基于Linux定时任务实现的MySQL周期性备份

1、创建备份目录 sudo mkdir -p /var/backups/mysql/database_name2、创建备份脚本 sudo touch /var/backups/mysql/mysqldump.sh# 用VIM编辑脚本文件&#xff0c;写入备份命令 sudo vim /var/backups/mysql/mysqldump.sh# 内如如下 #!/bin/bash mysqldump -uroot --single-…...

编程日记 2024/4/14 19:06:46

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/9 15:39:14

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

编程新知 2025/12/15 8:20:48