vue中v-bind控制class和style

当使用v-bind指令控制class和style时,可以通过动态绑定的方式根据不同的条件来添加或移除class,以及改变元素的样式。

1. 控制class

通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。

  • 对象语法:使用对象语法,可以根据条件来动态添加或移除class。

    <div :class="{ active: isActive }"></div>
    

    在上面的例子中,如果isActive为true,则会给该元素添加一个名为"active"的class。

  • 数组语法:使用数组语法,可以根据条件来添加或移除多个class。

    <div :class="[isActive ? 'active' : '', isHighlighted ? 'highlighted' : '']"></div>
    

    在上面的例子中,如果isActive为true,则会给该元素添加一个名为"active"的class;如果isHighlighted为true,则会给该元素添加一个名为"highlighted"的class。

  • 计算属性:使用计算属性,可以根据条件来动态计算class。

    <div :class="computedClasses"></div>
    

    computed: {computedClasses() {return {active: this.isActive,highlighted: this.isHighlighted}}
    }
    

    在上面的例子中,根据isActive和isHighlighted的值,计算出一个包含active和highlighted的class对象。

2. 控制style

通过v-bind:style可以动态绑定style属性。可以直接绑定一个样式对象,也可以使用计算属性来计算一个样式对象。

  • 直接绑定样式对象:直接绑定一个样式对象,可以根据条件来动态设置元素的样式。

    <div :style="{ color: isActive ? 'red' : 'blue', fontSize: isHighlighted ? '20px' : '14px' }"></div>
    

    在上面的例子中,如果isActive为true,则设置该元素的color为红色;如果isHighlighted为true,则设置该元素的fontSize为20px。

  • 计算属性:使用计算属性,可以根据条件来计算一个样式对象。

    <div :style="computedStyles"></div>
    

    computed: {computedStyles() {return {color: this.isActive ? 'red' : 'blue',fontSize: this.isHighlighted ? '20px' : '14px'}}
    }
    

    在上面的例子中,根据isActive和isHighlighted的值,计算出一个包含color和fontSize的样式对象。

通过动态绑定class和style,可以根据不同的条件来改变元素的外观和样式,实现更灵活的界面效果。

导航栏选中字体高亮显示

注意以下代码需要放HTML代码中运行

<div id="app"><nav><ul><li v-for="(item, index) in navItems" :key="index" :class="{ active: selectedIndex === index }" @click="selectNavItem(index)" >{{ item.text }}</li></ul></nav></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {navItems: [{ text: '首页', color: '#f44336' },{ text: '关于', color: '#9c27b0' },{ text: '联系', color: '#4caf50' },{ text: '帮助', color: '#ff9800' }],selectedIndex: 0},methods: {selectNavItem(index) {this.selectedIndex = index;}}})

以上代码是一个简单的导航栏组件,使用Vue.js来实现导航栏的点击高亮效果。

在代码中,<div id="app">是Vue实例的挂载点,Vue会将组件渲染到这个挂载点下。

<nav>标签内部是一个无序列表<ul>,通过v-for指令遍历navItems数组,生成列表项<li>v-for="(item, index) in navItems"表示将navItems数组中的每一项item遍历,并将当前项的索引index也绑定到变量中。

:key="index"指定每一个列表项的唯一key值,以便在重绘时进行优化。

:class="{ active: selectedIndex === index }"使用了动态绑定class的对象语法,根据selectedIndex的值和列表项的索引index是否相等,决定是否给该列表项添加名为"active"的class。如果相等,则添加,实现高亮效果。

@click="selectNavItem(index)"绑定了点击事件,当点击列表项时,触发selectNavItem方法,将当前项的索引index传入,从而更新selectedIndex的值,实现切换高亮的效果。

在Vue实例中,data属性中navItems是一个包含导航项的数组,selectedIndex是当前选中的导航项的索引。methods属性中定义了一个selectNavItem方法,用于更新selectedIndex的值。

最后,通过实例化Vue对象,将el属性指定为"#app",将Vue实例挂载到页面上。然后Vue会监听数据的变化,根据数据的变化自动更新界面,实现导航栏的点击高亮效果。

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

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

相关文章

关于ImportError: attempted relative import with no known parent package解决

问题 我的项目结构如下&#xff1a; my_project/ ├── utils/ │ ├── __init__.py │ └── config.py └── scripts/├── __init__.py└── train.py当我在train.py中 尝试导入config中的模块时&#xff0c;即 from ..utils.config import *&#xff0c;报错…

提升消费者满意度的五星售后服务认证

在当今竞争激烈的市场环境中&#xff0c;消费者满意度是企业取得成功的重要因素。五星售后服务认证作为一种权威性认证&#xff0c;可以显著提高消费者满意度&#xff0c;增强企业的竞争力。本文将从四个方面探讨五星售后服务认证如何提高消费者满意度。 五星售后服务认证是由国…

SpringCash

文章目录 简介引入依赖application.yml配置常用注解使用1. 启动类添加注解使用方法上添加注解 简介 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能底层可以使用EHCache、Caffeine、Redis实现缓存。 注解一般放在Controller的方法上&#xff0c;CachePut 注解一…

高精度定位技术的必要性与实际应用

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;高精度精准定位技术已成为一项不可或缺的基础技术&#xff0c;其应用范围涉及军事、航空、智能交通、无人驾驶、智慧城市建设等众多领域。高精度精准定位不仅为人们的日常生活带来极大便利&#xff0c;还对提升国家的科技…

鸿蒙轻内核A核源码分析系列六 MMU协处理器(1)

在前面系列分析虚实映射时&#xff0c;涉及到了一些MMU协处理器与相关的汇编代码没有深入讲解。本文来专门分析那些协处理器与汇编代码。 本文中所涉及的源码&#xff0c;以OpenHarmony LiteOS-A内核为例&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_l…

mysql性能优化知识点

MySQL性能优化是一个多方面的议题&#xff0c;涉及数据库设计、查询优化、服务器配置、索引管理等多个层面。 以下是一些关键的优化策略&#xff1a; 1、优化简介 使用SHOW STATUS语句查询一些MySQL数据库性能参数&#xff0c;格式如下&#xff1a; SHOW STATUS LIKE value;…

Presidents of America(1789-1860)

Presidents of America preface 美国总统&#xff0c;是美利坚合众国的国家元首、政府首脑与三军统帅&#xff0c;是当今世界权力最高的人。美国总统是根据1787年通过的美国宪法而设立&#xff0c;行使宪法赋予的行政权。截至目前&#xff0c;美国一共有过44位总统(45任&…

项目中的增删改查

1.增加&#xff1a; 接口定义&#xff1a;在Spring Boot的Controller&#xff08;控制层&#xff09;定义添加医院的接口&#xff0c;使用POST方法&#xff0c;并接收医院信息的JSON数据。数据校验&#xff1a;在接收到数据后&#xff0c;进行必要的数据校验&#xff0c;确保数…

运行mvn命令打包项目jar包报错?“Fatal error compiling: 无效的目标发行版: 19 ”, 让我来看看~

最近写实验&#xff0c;要打包项目&#xff0c;但是不管是在cmd运行“mvn clean package -Dmaven.test.skiptrue”命令&#xff0c;还是在idea上去操作&#xff0c;都出现了这样的一个错误&#xff1a; [EROR] Failed to exeoute goal org.apache.maven.plugins:maven-comnpile…

CCRC信息安全服务资质认证是什么

什么是CCRC认证&#xff1f; CCRC 全称 China Cybersecurity Review Technology and Certification Center。CCRC认证是指中国网络安全审查技术与认证中心进行的信息安全服务资质认证。简称信息安全服务资质认证。 CCRC&#xff0c;即中国网络安全审查技术与认证中心&#xff0…

倾斜摄影优化之重:轻量化

老子云倾斜摄影轻量化 1、支持全网多端流畅展示 2、支持私有化部署 3、一键轻量化G级模型 4、多种精度选择 5、支持二次开发 &#xff08;1&#xff09;、压缩可达98%以上 &#xff08;2&#xff09;、多种精度任选&#xff1a;普清、标清、高清、超清 &#xff08;3&am…

Illustrator 2024 mac/win版:创新设计,一触即发

Illustrator 2024是一款由Adobe公司开发的强大且全面的矢量图形设计软件&#xff0c;它以其卓越的性能和丰富的功能&#xff0c;为设计师们提供了一个高效、直观且富有创意的工作环境。 Illustrator 2024 mac/win版获取 作为一款矢量图形设计软件&#xff0c;Illustrator 2024…

linux shell查看24h内修改的文件

执行命令&#xff1a; find /path -type f -mtime 0

【电机】开环控制系统和闭环控制系统

1 什么是控制系统 控制系统是指由控制主体、控制客体和控制媒体组成的具有自身目标和功能的管理系统。也可以理解为&#xff1a;为了使控制对象达到预期的稳定状态。例如一个水箱的温度控制&#xff0c;可以通过控制加热设备输出的功率进而来改变水温达到目标温度&#xff0c;…

基于WPF技术的换热站智能监控系统09--封装水泵对象

1、添加用户控件 2、编写水泵UI 控件中用到了Viewbox控件&#xff0c;Viewbox控件是WPF中一个简单的缩放工具&#xff0c;它可以帮助你放大或缩小单个元素&#xff0c;同时保持其宽高比。通过样式和属性设置&#xff0c;你可以创建出既美观又功能丰富的用户界面。在实际开发中…

Ansible——yum模块

目录 参数总结 1. 安装软件包 安装单个软件包 安装多个软件包 从特定仓库安装 安装包并禁用 GPG 检查 简单的命令行帮助 2. 更新软件包 更新单个软件包到最新版本 更新所有可升级的软件包 3. 删除软件包 删除单个软件包 删除多个软件包 4. 安装特定版本的软件包…

Java使用swing实现简易计算器

效果如下 代码实现 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class SimpleCalculator {private JFrame frame;private JTextField numField1;private JTextField numField2;private JTex…

flink消费kafka时获取元数据信息

当flink消费kafka时&#xff0c;只需要简单配置就能使用并正常运行 val env StreamExecutionEnvironment.getExecutionEnvironmentval props new Properties()props.setProperty(ConsumerConfig.BOOTSTRAP_SERVERS_CONFIG, "192.168.0.30:9092")props.setProperty(…

数据结构习题(快期末了)

一个数据结构是由一个逻辑结构和这个逻辑结构上的一个基本运算集构成的整体。 从逻辑关系上讲&#xff0c;数据结构主要分为线性结构和非线性结构两类。 数据的存储结构是数据的逻辑结构的存储映像。 数据的物理结构是指数据在计算机内实际的存储形式。 算法是对解题方法和…

java基础知识漏洞三

Object Object 类的常见方法有哪些&#xff1f; /*** native 方法&#xff0c;用于返回当前运行时对象的 Class 对象&#xff0c;使用了 final 关键字修饰&#xff0c;故不允许子类重写。*/ public final native Class<?> getClass() /*** native 方法&#xff0c;用于…