vue3 :deep()的使用教程
作者：明似水
对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧
vue3 :deep()的使用
前言
对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。
一、:deep()是什么？ :deep()是可以改变css解析时私有属性的样式 常见使用场景: 如改变输入框的背景颜色
我们找到解析时找到输入框的class
使用:deep()修改背景颜色
<route lang="yaml">
meta:
title: 测试界面
</route>
<script lang="ts" setup>
import Draggable from 'vuedraggable'
const reason = ref('')
</script>
<template>
<div class="select_text c-red">
选择器
</div>
<div class="outer">
<el-input
v-model="reason"
type="textarea"
:autosize="{ minRows: 3, maxRows: 5 }"
show-word-limit
maxlength="100"
/>
</div>
</template>
<style lang="scss" scoped>
:deep() {
.el-textarea__inner{
background: red;
}
}
</style>总结
这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！
vue3 deep用法
:deep(.van-grid-item__content) {
padding-bottom: 0;
}
:deep()到此这篇关于vue3 :deep()的使用的文章就介绍到这了,更多相关vue3 :deep()的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！