vue中class动态绑定的四种方式

weixin_41646804

已于 2022-02-08 12:22:59 修改

阅读量368

点赞数

分类专栏：原创文章标签： vue.js javascript 前端

于 2022-02-08 09:29:21 首次发布

本文链接：https://blog.csdn.net/weixin_41646804/article/details/122817899

版权

原创专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个关于Vue.js中动态组件如何通过CSS类名变化反映组件状态的示例。通过hover和visited状态，探讨了如何使用计算属性控制样式，以及active状态的切换逻辑。同时，涉及了前端开发的基础知识，如CSS选择器和Vue组件的交互。

摘要由CSDN通过智能技术生成

// An highlighted block
<template>
  <div :class="active">{{name}}</div>
  <div :class="{'hover-name':hover, 'visited-name':visited}">
  <div :class="[isActive ? activeClass : '', errorClass]"></div>
  <div :class="[{ 'active-name': isActive }, errorClass]"></div></div>
</template>
<script>
export default{
data(){
  return{
    name:"xiaohong",
    hover:true,
    visited:null,
    activeClass: 'active-name',
    errorClass: 'text-danger'
  }
},
computed:{
  active(){
    if(this.name==='xiaohong'){
       return 'active-name'
       }
    }
  }
}
</script>
<style>
.active-name{
  color:red
}
.hover-name{
color:green
}
.visited-name{
color:blue
}
</style>