v-bind动态改变样式

news2024/12/23 17:03:00

通过v-bind切换样式,:class="{ active:true}"为true展示样式,false不展示。也可以由:style="{ width:percent + '%'}"动态控制宽度。
注意后面是JS对象,所以后面的值不可以包含-,比如background-color会解析出错,应该写成backgroundColor,后面的值要有一对''包裹。

class案例(无样式)

当我们点击某一项时,对应的背景色就会变红。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
  .active {
    background-color: red;
  }
</style>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="clickIndex=index" :class="{ active: clickIndex=== index}">
        {{item.name}}
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        clickIndex: -1,
        list: [
          { id: 1, name: '优惠秒杀' },
          { id: 2, name: '特价优惠' }
        ]
      }
    })
  </script>
</body>
</html>

class案例(有样式)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }

    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }

    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }

    li a.active {
      background-color: #e01222;
      color: #fff;
    }
  </style>
</head>

<body>

  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="activeIndex=index">
        <a :class="{active: activeIndex === index}" href="#">{{item.name}}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })
  </script>
</body>

</html>

style案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
  <div id="app">
    <div :style="{ backgroundColor:'red', width:width+'px',height: width+'px'}"></div>
    <button @click="width='200'">200px</button>
    <button @click="width='300'">300px</button>
  </div>

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        width: '100'
      }
    })
  </script>
</body>
</html>

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

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

相关文章

报修软件在企业管理中有哪些作用?有什么好用的设备质量管理软件?

在当今的信息化时代&#xff0c;企业需要不断加速自身的信息化建设&#xff0c;以适应日益激烈的市场竞争。在这个过程中&#xff0c;“的修”报修软件的引入对于企业设备报修与维护的管理显得尤为重要。本文将详细介绍报修软件的重要性以及其如何帮助企业实现更高效、更智能的…

毕业论文问卷分析思路

很多同学会通过收集问卷的方式获取论文研究需要的数据&#xff0c;但是收集到的问卷应该如何分析呢&#xff1f;问卷一般可以分为两类&#xff1a;非量表类与量表类问卷。不同类型的问卷有不同的分析思路&#xff0c;今天和大家探讨一下拿到一份问卷后&#xff0c;一般的分析思…

Day 15 python学习笔记

__str__ 用print打印对象时&#xff0c;会自动调用 class Test:def __init__(self,name):self.name name# 用print打印对象时&#xff0c;会自动调用def __str__(self):return f"姓名name的值是{self.name}"a Test("zhangsan") print(a)结果&#xff1…

40+专家齐聚共谋数据未来,StarRocks Summit 2023 议程公布!更多精彩议题等你探索...

数字经济时代&#xff0c;什么才是企业的核心竞争力&#xff1f; 答案是数据。 在过去的一年里&#xff0c;越来越多的企业率先行动起来&#xff0c;加入这场数智化的进程中&#xff0c;探寻最佳的底层数据架构模式和极致的数据分析方案。 作为数据进化的亲历者&#xff0c;Sta…

软考_软件设计师

算法&#xff1a; 1、直接插入排序 详解&#xff1a;https://blog.csdn.net/qq_44616044/article/details/115708056 void insertSort(int data[],int n){int i,j,temp;for(i1;i<n;i){if(data[i]<data[i-1]){temp data[i];data[i] data[i-1];for(ji-1;j>0&&am…

OPPO Find N3,解码“新商务场景”

2023行至尾声&#xff0c;这一年消费电子市场的整体表现&#xff0c;很难被评价为乐观。智能手机等大宗产品的需求疲软&#xff0c;技术越来越同质化&#xff0c;产品越来越成熟&#xff0c;出货量下行。国际数据公司&#xff08;IDC&#xff09;手机季度跟踪报告显示&#xff…

App测试基本流程以及注意事项

1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间&#xff0c;一般测试时间为两三周&#xff08;即15个工作日&#xff09;&#xff0c;根据项目情况以及版本质量可适当缩短或延长测试时间。 1.3测试资源 测试任务开始前&#xff0c;检查…

弱覆盖栅格图层制作

栅格边界生成及图层制作 栅格边界polygon生成 提取的弱覆盖栅格数据中包含了栅格中心经度和栅格中心维度&#xff0c;我们根据栅格中心经纬度生成对应的栅格边界POLYGON&#xff08;20米*40米&#xff09; 计算公式&#xff1a;polygon(栅格中心经度-0.00017 栅格中心纬度0.00…

大数据之LibrA数据库系统告警处理(ALM-12004 OLdap资源异常)

告警解释 当Manager中的Ldap资源异常时&#xff0c;系统产生此告警。 当Manager中的Ldap资源恢复&#xff0c;且告警处理完成时&#xff0c;告警恢复。 告警属性 告警参数 对系统的影响 Ldap资源异常&#xff0c;Manager和组件WebUI认证服务不可用&#xff0c;无法对Web上层…

Syntax Error: TypeError: this.getOptions is not a function的解决(Vue)

报错信息&#xff1a; TypeError: this.getOptions is not a function 这个是在运行项目是遇到的问题 这个报错是类型错误&#xff0c;this.getOptions 不是一个函数 。这个错误一般就是less-loader库里的错误。 主要是less-loader版本太高&#xff0c;不兼容this.getOptions…

WPF自定义控件库之Window窗口

在WPF开发中&#xff0c;默认控件的样式常常无法满足实际的应用需求&#xff0c;我们通常都会采用引入第三方控件库的方式来美化UI&#xff0c;使得应用软件的设计风格更加统一。常用的WPF的UI控件库主要有以下几种&#xff0c;如&#xff1a;Modern UI for WPF&#xff0c;Mat…

IDEA配置类、方法注释模板

一、打开 IDEA 的 Settings&#xff0c;点击 Editor–>File and Code Templates&#xff0c;点击右边 File 选项卡下面的 Class&#xff0c;在其中添加图中红框内的内容&#xff1a; /** * author li-kun * date ${YEAR}年${MONTH}月${DAY}日 ${TIME} */当你创建一个新的类…

考试成绩这样分发

老师们&#xff0c;还在为每次繁琐的成绩查询而头痛&#xff1f;今天我就要给大家带来一个超级实用的教程&#xff0c;让你轻松解决这个问题&#xff01; 我来介绍一下这个神秘的“成绩查询页面”。别以为它很复杂&#xff0c;其实它就是一个简单的网页&#xff0c;上面会有每个…

深入探索 C++ 多态 ① - 虚函数调用链路

前言 最近翻阅侯捷先生的两本书&#xff1a;&#xff08;翻译&#xff09;《深度探索 C 对象模型》 和 《C 虚拟与多态》&#xff0c;获益良多。 要理解多态的工作原理&#xff0c;得理解这几个知识点的关系&#xff1a;虚函数、虚函数表、虚函数指针、以及对象的 内存布局。…

【骑行贝丘渔场】一场与海的邂逅,一段难忘的旅程

在这个渐凉的秋日&#xff0c;我们校长骑行队一行人骑着自行车&#xff0c;从大观公园门口出发&#xff0c;开始了一段别开生面的海滩之旅。沿途穿越草海隧道湿地公园、迎海路、海埂公园西门&#xff08;第二集合点&#xff09;、宝丰湿地公园、斗南湿地公园、蓝光城&#xff0…

代理模式代理模式

目录 1、使用场景 2、静态代理 3、动态代理 JDK动态代理 CGlib 动态代理实现 1、使用场景 使用代理模式主要有两个目的&#xff1a;一是保护目标对象&#xff0c;二是增强目标对象。 2、静态代理 NO.1 抽象接口&#xff1a;定义视频播放器接口Player public interface P…

大数据之路-日志采集

数据采集作为大数据体系中的第一环节&#xff0c;对如何全面、高性能、规范完成海量数据的采集&#xff0c;并将其传输到大数据平台。 1.浏览器的页面日志采集 1.1 页面浏览日志采集流程 页面浏览日志是最基础的互联网日志&#xff0c;其中页面浏览量&#xff08;PageView&am…

短期经济波动:均衡国民收入决定理论(一)

宏观经济学讲义 10 短期经济波动&#xff1a;均衡国民收入决定理论(一) 文章目录 10 短期经济波动&#xff1a;均衡国民收入决定理论(一)[toc]1 均衡国民收入决定1.1 均衡国民收入决定的不同理论1.2 两部门经济&#xff1a;有效需求原理和框架1.2.1 模型假设1.2.2 模型推导1.2…

【零基础抓包】Fiddler超详细教学(一)

​Fiddler 1、什么是 Fiddler? Fiddler 是一个 HTTP 协议调试代理工具&#xff0c;它能够记录并检查所有你的电脑和互联网之间的 HTTP 通讯。Fiddler 提供了电脑端、移动端的抓包、包括 http 协议和 https 协议都可以捕获到报文并进行分析&#xff1b;可以设置断点调试、截取…

期中成绩发布一对一查询

亲爱的老师们&#xff01;我知道您在期中考试后忙碌而又紧张&#xff0c;不仅要准备试卷分析&#xff0c;还要面对学生和家长的询问。现在&#xff0c;我为您带来了一款一对一成绩查询系统&#xff0c;让您的工作变得更简单、更高效&#xff01; 什么是成绩查询系统&#xff1f…