Vue基础知识梳理（二）

GG·bond

已于 2022-01-21 14:43:53 修改

阅读量890

点赞数 1

分类专栏： vue基础知识文章标签： vue基础知识

于 2022-01-12 15:54:18 首次发布

本文链接：https://blog.youkuaiyun.com/GTbond/article/details/122455212

版权

本文详细梳理了Vue中的动态绑定class、.native事件监听、子组件调用父组件方法、处理非响应式数据、keep-alive的使用以及router-view的命名视图功能。介绍了v-bind:class的两种实现方式、.native修饰符解决组件事件穿透问题，以及通过this.$parent访问父组件数据。还探讨了如何避免不需要响应式的数据处理，并解析了keep-alive在组件缓存中的作用，以及router-view在不同层级路由中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue基础知识梳理（二）

1. vue中v-bind:class动态添加class

总结：动态添加class，需要给：class=“对象”，对象中value为true，则key作为class名添加；value为false，则添加失败

方案一：直接在html结构中给class一个对象

//html
<div class="btn" :class="{wordColor:false,wordSize:true}" >点我</div>

//样式
.btn{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: cornflowerblue;
}
.wordColor{
    color: crimson;
}
.wordSize{
    font-size: 24px;
}

效果
在这里插入图片描述

方案二：使用计算属性返回对象

//html
 <div class="btn" :class="classname" >点我</div>

//计算属性
computed:{
	//返回一个对象给class，对象中属性值为true的属性，属性名被添加到class名中
    classname(){
        return{
            wordColor:true,
            wordSize:false
        }
    }
}
//样式
.btn{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: cornflowerblue;
}
.wordColor{
    color: crimson;
}
.wordSize{
    font-size: 24px;
}

效果图
在这里插入图片描述

动态添加style也是一样

动态style对象：<div :style="{ color: textColor, fontSize: '18px' }">&l

最低0.47元/天解锁文章