vue简单使用二(循环)

目录

     属性绑定

     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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ActiveMQ + MQTT 集群搭建(虚机版本) + Springboot使用配置

文章目录 前言一、ActiveMQ、 MQTT是什么&#xff1f;1.ActiveMQ介绍2.MQTT介绍 二、集群搭建步骤1.下载apache-activemq-5.15.12-bin.tar.gz2.上传apache-activemq-5.15.12-bin.tar.gz到服务器并解压文件到文件夹clusters、master、slave三个文件夹下面形成三个节点&#xff0…

Win10下安装Anaconda

Anaconda是可以便捷获取包且对包能够进行管理&#xff0c;同时对环境可以统一管理的发行版本&#xff0c;它包含了conda、Python在内的超过180个科学包及其依赖项。 安装Anaconda Anaconda官方下载网址&#xff1a;https://www.anaconda.com/download 官网页面中&#xff0c…

Docker日志查看神器

探索Dozzle&#xff1a;简单实用的Docker日志查看工具 在容器化应用程序的开发和部署中&#xff0c;日志管理是至关重要的一环。为了便于查看和监控Docker容器的日志信息&#xff0c;开发人员和运维团队需要便捷的工具。Dozzle 就是这样一款简单实用的Docker日志查看工具&…

2024 Mathorcup高校数学建模挑战赛(A题)| PCI冲突问题 | 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍团队独辟蹊径&#xff0c;以整数规划&#xff0c;多元回归等强大工具&#xff0c;构建了解决复杂问题的独特方案。深度学习, 混沌模型的妙用&#xff0c;为降低非法野生动物贸易提供新视角。通过综合分析&#xff0c;描绘出概率、…

基于springboot实现知识管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现知识管理系统演示 摘要 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个专门适应师生作业交流形式的网站。本文介绍了知识管理系统的开发全过程。通过分析企业对于知识管理系统的需求&#xff0c;创建了…

日出6万单!美区“开塞露”卖疯了,保健赛道正式起飞!

质疑养生&#xff0c;理解养生&#xff0c;加入养生&#xff01; 从保温杯里泡枸杞&#xff0c;到桌上摆满保健品&#xff0c;"养生"已经从一种模糊的概念转变为了生活中的刚需。在加班、熬夜、脱发这些"亚健康"标签的围绕下&#xff0c;年轻人开始重视自…

k8s基础入门

前言 开始学习K8S了&#xff0c;下面就是笔记整理 简介 k8s是谷歌开源得容器管理系统&#xff0c;主要功能包括 基于容器得应用部署&#xff0c;维护和滚动升级负载均衡和服务发现跨机器和跨地区得集群调度自动伸缩无状态服务和有状态服务广泛得Volume支持插件保持扩展性 …

ELFK的部署

目录 一、ELFK&#xff08;FilebeatELK&#xff09; 1. Filebeat的作用 2. ELFK工作流程 3. ELFK的部署 3.1 服务器配置 3.2 服务器环境 3.3 安装filebeat 3.4 修改filebeat主配置文件 3.5 在logstash组件所在节点&#xff08;apache节点&#xff09;上新建一个logstas…

如何管好地铁站见新质生产力 | 图扑数字孪生

智慧车站建设是现代交通领域的重要发展方向&#xff0c;旨在通过集成先进的信息技术&#xff0c;提升车站的运营效率、安全性及乘客体验。基于既有的综合监控技术&#xff0c;通过集成多种传感器和数据采集设备&#xff0c;实现对车站设备、环境、客流、人员等对象群的智能感知…

这样画箱线图,为你的SCI论文增色!

高级箱线图的绘制 下面的箱线图比较美观&#xff0c;非常适合数据量不大、且分布明显的时候使用。 在论文撰写中&#xff0c;图表的清晰和吸引人的展示方式是至关重要的。箱线图&#xff08;Whisker Plot&#xff09;是一种展示数据分布的经典工具&#xff0c;它不仅可以清楚地…

第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-七段码

#include<iostream> using namespace std; const int N 10, M 7; int e[N][N] {0}, f[N], open[N];//e[i][j]表示i和j之间是否连通&#xff1b;f[i]表示结点i的父节点&#xff1b;open[i] 1表示结点i打开&#xff0c;0表示关闭 long long ans 0;int find(int x){if(…

【ROS2笔记一】ROS2的基本组件

1.ROS2的基本组件 与ROS1类似的&#xff0c;ROS2也具有node&#xff0c;topic&#xff0c;service&#xff0c;action之类的组件&#xff0c;并且也具有rqt等工具。 可以像使用ROS1的命令行的方式&#xff08;参这里【ROS学习笔记7】ROS中的常用命令行&#xff09;&#xff0…

Mysql内存表及使用场景(12/16)

内存表&#xff08;Memory引擎&#xff09; InnoDB引擎使用B树作为主键索引&#xff0c;数据按照索引顺序存储&#xff0c;称为索引组织表&#xff08;Index Organized Table&#xff09;。 Memory引擎的数据和索引分开存储&#xff0c;数据以数组形式存放&#xff0c;主键索…

【保姆级讲解Nginx】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

拿到迅雷网盘推广授权,离财富自由更进一步

为了提高平台知名度、增加平台用户数量&#xff0c;迅雷网盘推出了网盘推广的新项目。网盘推广的奖励很丰厚&#xff0c;只要有人点击、下载你分享的资料&#xff0c;你就能获得佣金。听到这里&#xff0c;是不是已经有人心动了&#xff1f;心动的人一定要看完下面的网盘推广&a…

【开发篇】十七、基准测试框架JMH

文章目录 1、JMH2、运行方式二3、死代码与黑洞变量4、可视化分析5、案例&#xff1a;日期格式化方法性能测试6、总结7、整合到SpringBoot 判断一个方法的耗时 ⇒ endTime-startTime ⇒ 不准确&#xff0c;首先部分对象懒加载&#xff0c;第一次请求会慢一些&#xff0c;其次&am…

YOLOv8改进 | 检测头篇 | 自研超分辨率检测头HATHead助力超分辨率检测(混合注意力变换器检测头)

一、本文介绍 本文给大家带来的改进机制是由由我本人利用HAT注意力机制(超分辨率注意力机制)结合V8检测头去掉其中的部分内容形成一种全新的超分辨率检测头。混合注意力变换器(HAT)的设计理念是通过融合通道注意力和自注意力机制来提升单图像超分辨率重建的性能。通道注意…

多无人机集群协同避障

matlab2020a正常运行 场景1规划结果 场景2规划结果 场景3规划结果 代码地址&#xff1a; 多无人机集群协同避障效果&#xff08;5架&#xff09;资源-CSDN文库

【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】

这里写自定义目录标题 D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现D3 简介D3 官网有很多例子,这里说的是Tidy tree[树形图表svg][左侧关系->中间对象<-右侧关系 ] 树形实现 D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形…

BM25和语言模型的改进研究

原文链接&#xff1a; BM25和语言模型的改进研究 摘要&#xff1a; 近期关于搜索引擎排名函数的研究报告指出&#xff0c;BM25和带Dirichlet平滑的语言模型有所改进。本研究通过在INEX 2009维基百科语料库上训练&#xff0c;然后在INEX 2010和9个TREC语料库上测试&#xff0…