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

vue简单使用二（循环）

news 2025/7/3 22:55:10

目录

     属性绑定

     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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/7/2 13:08:34

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/1 21:15:25

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/6/17 10:09:07

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/6/21 17:27:56

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/7/3 3:03:46

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/7/1 3:00:50

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/6/26 1:48:49

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18