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

vue简单使用二（循环）

news 2025/10/21 14:59:45

目录

     属性绑定

     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

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/10/18 7:02:36

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/19 13:30:36

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/9/28 4:34:59

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/9/28 3:35:05

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/9/18 4:10:42

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/10/16 22:41:12

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/9/28 3:38:40

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/8 18:12:44