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

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.lryc.cn/news/338479.html

相关文章:

  • JavaScript入门--变量
  • 给自己的机器人部件安装单目摄像头并实现gazebo仿真功能
  • 用AI的视角看世界
  • MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64)
  • 拯救鲨鱼!Helping wireshark!wireshark未响应解决方法
  • 设计模式之责任链讲解
  • K8s: 将一个节点移出集群和相关注意事项
  • Python学习笔记24 - 学生信息管理系统
  • 【物联网应用案例】某制造企业电锅炉检测项目
  • 设计模式实践
  • 嵌入式学习52-ARM1
  • Java(MySQL基础)
  • 预约系统的使用
  • 酷开科技OTT大屏营销:开启新时代的营销革命
  • 网络安全(防火墙,IDS,IPS概述)
  • 安装IntelliJ IDEA插件教程
  • 大厂基础面试题(之四)
  • 为什么我们应该切换到Rust
  • 基于Linux定时任务实现的MySQL周期性备份
  • 【Altium Designer 20 笔记】隐藏PCB上的信号线(连接线)
  • 【Git教程】(九)版本标签 —— 创建、查看标签,标签的散列值,将标签添加到日志输出中,判断标签是否包含特定的提交 ~
  • MemberPress配置和使用会员登录页面
  • 分享一个预测模型web APP的功能模块和界面的设计
  • 智慧公厕是智慧城市建设中不可或缺的一部分
  • leetcode热题100.爬楼梯(从二进制到快速幂)
  • 使用Docker定时备份数据
  • conda搭建与管理python环境
  • 获取当前的年、月、日、时、分、秒,并将这些信息用作保存 Excel 文件的前缀
  • Gitlab全量迁移
  • Golang ProtoBuf 初学者完整教程:语法