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

vue简单使用二（循环）

news 文章来源：https://blog.csdn.net/weixin_41670405/article/details/137641187 2024/11/1 22:35:18

目录

     属性绑定

     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

【Altium Designer 20 笔记】隐藏PCB上的信号线（连接线）

使用网络类隐藏特定类型的信号线 如果你想要隐藏特定类型的信号线&#xff08;例如电源类&#xff09;&#xff0c;你可以首先创建一个网络类。使用快捷键DC调出对象类浏览器&#xff0c;在Net Classes中右击添加类&#xff0c;并重命名&#xff08;例如为“Power”&#xff0…...

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

【Git教程】（九）版本标签 —— 创建、查看标签，标签的散列值，将标签添加到日志输出中，判断标签是否包含特定的提交 ~

Git教程 版本标签&#xff08;tag&#xff09; 1️⃣ 创建标签2️⃣ 查看存在的标签3️⃣ 标签的散列值4️⃣ 将标签添加到日志输出中5️⃣ 判断tag是否包含特定的提交&#x1f33e; 总结 大多数项目都是用 1.7.3.2和 “ gingerbread” 这样的数字或名称来标识软件版本的。在 …...

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

MemberPress配置和使用会员登录页面

目录 隐藏 创建会员登录页面 编辑登录页面 设计您的登录页面 链接到您的登录页面 创建会员登录页面 要创建MemberPress会员登录页面&#xff0c;您需要做的就是导航到 MemberPress > 设置 > 页面选项卡&#xff0c;然后在页面顶部附近的“MemberPress 登录页面”…...

编程日记 2024/4/14 19:01:40

分享一个预测模型web APP的功能模块和界面的设计

一个临床预测模型web APP功能模块与界面设计 随着医疗技术的不断进步&#xff0c;web APP是临床预测模型在医学领域的应用的重要形式。这里分享一个web APP的设计&#xff0c;手里有医学预测模型的可以尝试将其构建成webAPP&#xff0c;进而在临床实践中体验预测模型带来的便利…...

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

智慧公厕是智慧城市建设中不可或缺的一部分

智慧城市的数字化转型正在取得显著成效&#xff0c;各项基础设施的建设也在迅速发展&#xff0c;其中智慧公厕成为了智慧城市体系中不可或缺的一部分。作为社会生活中必要的设施&#xff0c;公共厕所的信息化、数字化、智慧化升级转型能够实现全区域公共厕所管理的横向打通和纵…...

编程日记 2024/4/14 18:55:34

leetcode热题100.爬楼梯（从二进制到快速幂）

Problem: 70. 爬楼梯 文章目录 题目思路Code复杂度 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方…...

编程日记 2024/4/14 18:48:27

使用Docker定时备份数据

文章目录 一、Docker镜像制作二、MySQL数据备份三、Minio数据备份四、数据跨服务器传输五、Nginx日志分割六、Docker启动七、Docker备份日志 一、Docker镜像制作 镜像制作目录 mc下载地址 - rsyncd.conf # https://download.samba.org/pub/rsync/rsyncd.conf.5port 873 uid …...

编程日记 2024/4/14 18:47:26

conda搭建与管理python环境

conda搭建与管理python环境.md Anaconda下载地址Miniconda下载地址Linux下安装1.执行安装2.查看可安装的python版本3.创建环境4.激活环境5.安装python的工具包5.退出环境6.删除指定的环境7.设置默认的环境 Window下安装1.执行安装2.配置环境变量3.检查是否安装成功4.通过conda配…...

编程日记 2024/4/14 18:46:24

获取当前的年、月、日、时、分、秒，并将这些信息用作保存 Excel 文件的前缀

要获取当前的年、月、日、时、分、秒&#xff0c;并将这些信息用作保存 Excel 文件的前缀&#xff0c;你可以使用 Python 的 datetime 模块来获取当前时间&#xff0c;并格式化时间字符串&#xff0c;然后使用 pandas 库将数据保存为 Excel 文件。示例代码&#xff1a; from d…...

编程日记 2024/4/14 18:45:23

Gitlab全量迁移

Gitlab全量迁移 一、背景1.前提条件 一、背景 公司研发使用的Gitlab由于服务器下架需要迁移到新的Gitlab服务器上。Gitlab官方推荐了先备份然后再恢复的方法。个人采用官方的另外一种方法&#xff0c;就写这篇文章给需要的小伙伴参考。 源Gitlab: http://old.mygitlab.com #地…...

编程日记 2024/4/14 18:44:22

图片上传网站变形的处理/seo网络营销招聘

目录 1. 下载IEDriverServer.exe 2. 将IEDriverServer.exe或IEDriverServer.64.exe放在C:\ProgramData\Anaconda3\Scripts下面 3. 测试代码 1. 下载IEDriverServer.exe 我在太平洋电脑网下载的&#xff0c;得到两个IEDriverServer.exe和IEDriverServer.64.exe&#xff0c;这…...

编程日记 2024/11/1 21:59:20

在线做qq空间的网站吗/营业推广策划

memcached 与 redis 的区别&#xff1f; 1、Redis 不仅仅支持简单的 k/v 类型的数据&#xff0c;同时还提供 list&#xff0c;set&#xff0c;zset&#xff0c;hash 等数据结构的存储。而 memcache 只支持简单数据类型&#xff08; php类型 基本类型&#xff1a;int string bo…...

编程日记 2024/11/1 20:51:02

网站安全管理/seo网站推广软件

/*** 通过数字切割字符串.* 如 将 abc123 切割成 abc 和 123 两个字符串** param o1* return*/public static String[] splitNum(String str){String[] result new String[2];for (int i 0; i < str.length(); i){String t new String(new char[] {str.charAt(i)});if (i…...

编程日记 2024/11/1 17:29:49

简单的手机网址大全/批量优化网站软件

1、JDK &#xff08;Java Development Kit&#xff09;Java开发工具集 　　 　　从初学者角度来看&#xff0c;采用JDK开发Java程序能够很快理解程序中各部分代码之间的关系&#xff0c;有利于理解Java面向对象的设计思想。JDK的另一个显著特点是随着Java &#xff08;J2EE、J2…...

编程日记 2024/11/1 14:07:03

怎么制作网站主题/营销推广活动策划

你应该认真对待Sprint目标的8个理由 在sprint期间&#xff0c;开发团队可以讨论并跟踪与sprint目标相关的进度。这有助于监控和评估整个sprint过程中的进展。冲刺目标 (Sprint Goal) 为构建产品增量提供了一个理由: 在“冲刺”的末尾&#xff0c;团队应该产生一个潜在的可发布…...

编程日记 2024/11/1 13:16:57

网站建设的一般过程包括哪些方面/自媒体账号申请

88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 就是归并排序的merge嘛&#xff0c;借助一个辅助数组就可以了。 class Solution { public:void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) {if(n 0) return;vector&l…...

编程日记 2024/11/1 12:08:11