vue17:v-bind对css样式的控制增强

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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><!-- 创建vue实例四步1:容器 div2:引包  (开发版本包/生产版本包)3:实例 4:配置-》渲染--><div id="app"><ul><li v-for="(item,index) in list" :key="item.id " @click="activeIndex=index" ><a :class="{active:index===activeIndex}" href="#">{{item.name}}</a></li></ul></div><!-- 引入开发版本Vuejs核心包,在全局环境下就有了vue构造函数 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>   <!--2:引包 开发版本包 --><script>const app = new Vue({el:'#app',data:{activeIndex:0,// data存放响应式数据list:[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]}})</script></body>
</html>

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

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

相关文章

『USB3.0Cypress』FPGA开发(3)GPIF II短包零包时序分析

文章目录 1.时序参数2.FX3_PCLK3.短包和零包3.1短包时序3.2零包ZLP时序 4.传送门 1.时序参数 AN65974文档中明确了操作GPIF II接口时的时序参数&#xff0c;上一篇文章中给出了读写时序图&#xff0c;本篇第二节给出ZLP写周期时序&#xff0c;这里说明相关的时序参数。应该注意…

initial begin end 和always语句区别

initial语句&#xff1a;只执行一次always语句&#xff1a;不断重复执行&#xff0c;直到仿真结束&#xff0c; initial begin 语句1; ... 语句n; end always (posedge clk or negedge clear) begin if(!clear) qout 0; //异步清零 else qout 1; end…

用户态下屏蔽全局消息钩子 —— ClientLoadLibrary 指针覆盖

目录 前言 一、研究 SetWindowsHookEx 的机制 二、概念验证 三、运行效果分析 四、总结与展望 参考文献 原文出处链接&#xff1a;[https://blog.csdn.net/qq_59075481/article/details/139206017] 前言 SetWindowsHookEx 函数帮助其他人员注入模块到我们的进程&#x…

【代码随想录训练营】【Day 27 and 28】【回溯1-2】| Leetcode 77, 216, 17

【代码随想录训练营】【Day 27 and 28】【回溯1-2】| Leetcode 77, 216, 17 需强化知识点 组合问题&#xff1a;感受遍历的横向和纵向 题目 77. 组合 注意path要深拷贝 class Solution:def combine(self, n: int, k: int) -> List[List[int]]:result []def backtrac…

C++中的模板类的定义与使用

文章目录 前言模板类的定义与使用方式模板类的总结 前言 在C中&#xff0c;模板类是一种通用的类模板&#xff0c;允许在类定义和成员函数实现时使用不具体指定的数据类型或参数。下面是模板类的定义与使用方式&#xff0c;并对其进行总结&#xff1a; 模板类的定义与使用方式…

Kubernetes(k8s) v1.30.1 本地集群部署 安装metallb 支持LoadBalancer 生产环境 推荐 BGP模式部署

1 metallb 安装参考:Kubernetes(k8s) v1.30.1 本地集群部署 默认不支持LoadBalancer metallb来解决-CSDN博客 2 删除 Layer 2 模式 配置 kubectl delete -f IPAddressPool.yaml kubectl delete -f L2Advertisement.yaml kubectl delete -f discuz-srv.yaml 3 配置 k8s Metal…

nacos-opera(k8s)安装问题解决

整理一些关于k8s部署nacos出现的一些恶心的问题 网上说其他说的更改数据库连接都未解决。 在用nacos-opera想安装高可用nacos时连接mysql数据库报错: 报错具体项: No DataSource set 具体就是说没找到数据源。 第一个 检查一下nacos连接数据库配置 : 第二个 检查一下数据库…

[笔试训练](三十三)097:跳台台阶扩展问题098:包含不超过两种字符的最长子串099:字符串的排列

目录 097:跳台台阶扩展问题 098:包含不超过两种字符的最长子串 099:字符串的排列 097:跳台台阶扩展问题 题目链接:跳台阶扩展问题_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 规律题: 1.跳上n级台阶的跳法等于前面1~(n-1)级台阶跳法的总和1。 2.跳…

开发中遇到Electron自定义窗口的问题

开发中遇到Electron自定义窗口的问题 使用VUE3 Electron 开发一个音乐软件&#xff0c;自定义导航栏的放大、缩小和关闭。 其中使用ipcRenderer进行联系Electron&#xff0c;进行放大、缩小和关闭操作。 遇到问题 遇到__dirname is not defined in ES module scope //在V…

一、机器学习概述

1.课程目的 学习机器学习算法、提高算法性能的技巧 2.算法分类 有监督学习supervised learning、无监督学习unsupervised learning (1).有监督学习 在这种学习方式中&#xff0c;算法需要一个带有标签的训练数据集&#xff0c;这些标签通常是每个样本的真实输出或类别。 在有…

[C][指针]详细讲解

目录 0.铺垫1.指针是什么&#xff1f;2.指针变量3.指针和指针类型4.指针类型的意义5.野指针1.野指针成因2.如何规避野指针6.指针运算 6.指针和数组7.二级指针(n级指针&#xff09;8.指针数组9.数组指针10.&数组名VS数组名11.函数指针 12.函数指针数组13.回调函数 0.铺垫 在…

NDIS小端口驱动(九)

PCIe设备难免会遇到一些重置设备的请求&#xff0c;例如重置总线的时候&#xff0c;但是由于NIC网卡的多样性&#xff0c;重置设备确实也有许多要注意的地方&#xff0c;另外还有一些包含WDM的NDIS驱动 微型端口驱动程序硬件重置 微型端口驱动程序必须向 NdisMRegisterMinipo…

C++技能进阶指南——多态语法剖析

前言&#xff1a;多态是面向对象的三大特性之一。顾名思义&#xff0c; 多态就是多种状态。 那么是什么的多种状态呢&#xff1f; 这里的可能有很多。比如我们去买火车票&#xff0c; 有普通票&#xff0c; 学生票&#xff1b; 又比如我们去旅游&#xff0c; 有儿童票&#xff…

视觉与数据的和谐:数字孪生技术在UI设计中的艺术

视觉与数据的和谐&#xff1a;数字孪生技术在UI设计中的艺术 引言 在UI设计的世界里&#xff0c;视觉艺术与数据科学似乎相隔甚远&#xff0c;然而随着数字孪生技术的出现&#xff0c;这两者之间的界限变得模糊。数字孪生技术不仅是一种技术革新&#xff0c;更是一种艺术形式…

LabviewCarla仿真平台搭建一:平台设计及仿真视频可视化实现

文章目录 背景一、平台设计二、视频显示模块实现1、视频模块实现框架2、python-camera数据生成3、labview-camera数据可视化 三、效果展示 背景 在使用carla的时候&#xff0c;有平台的话可以提高效率&#xff0c;因此想结合labview和carla设计一个仿真平台-labcar。其实carla…

【DASBOOK】Mark loves cat

文章目录 一、工具下载二、Mark loves cat解题感悟 一、工具下载 克隆dirsearch仓库&#xff1a; git clone https://github.com/maurosoria/dirsearch.git下载 githack工具 git clone https://github.com/lijiejie/GitHack.git二、Mark loves cat 用dirsearch扫描目录&…

talib 安装

这里写自定义目录标题 talib 安装出错 talib 安装出错 https://github.com/cgohlke/talib-build/releases 这里找到轮子 直接装。

DatePicker日期选择框(antd-design组件库)简单使用

1.DatePicker日期选择框 输入或选择日期的控件。 2.何时使用 当用户需要输入一个日期&#xff0c;可以点击标准输入框&#xff0c;弹出日期面板进行选择。 组件代码来自&#xff1a; 日期选择框 DatePicker - Ant Design 3.本地验证前的准备 参考文章【react项目antd组件-demo:…

算法提高之你能回答这些问题吗

算法提高之你能回答这些问题吗 核心思想&#xff1a;线段树 用sum,lmax,rmax,tmax分别存线段长度,最大前缀,最大后缀,最大子段和 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 500010;int n,m;int w[N];s…

简单3步,ERP、OA、CRM等客户端,安全远程访问服务端

如今&#xff0c;企业员工出差远程办公和分支机构的协同工作变得越来越普遍。然而&#xff0c;如何确保在不同地点的员工都能安全、便捷地访问公司内网的C/S&#xff08;Client/Server&#xff09;架构办公系统&#xff0c;是一个亟待解决的问题。 贝锐花生壳内网穿透服务提供…