vue3 :deep()的使用教程

更新时间：2023年10月19日 15:12:40 作者：明似水

对应前端小白来说,一看到: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()的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3
:deep()

vue实现购物车结算功能
这篇文章主要为大家详细介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue之webpack -v报错解决方案总结
这篇文章主要介绍了vue之webpack -v报错解决方案总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
Vue 非常实用的自定义指令分享
这篇文章主要介绍了Vue 非常实用的自定义指令分享，Vue自定义指令有全局注册和局部注册两种方式，在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令，下文小编给大家分享那些常用到的Vue自定义指令
2022-02-02
详解vue中配置代理(解决跨域请求)
这篇文章主要为大家详细介绍了vue如何通过配置代理来解决跨域请求的问题，文中的示例代码讲解详细，对我们深入学习vue有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
2023-08-08
Vue v-model实现案例介绍
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值
2022-09-09
Vue中provide、inject详解以及使用教程
provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下
2022-11-11
vue如何查找数组中符合条件的对象
这篇文章主要介绍了vue如何查找数组中符合条件的对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue如何关闭eslint检测(多种方法)
我们在开发vue项目的时候，创建的时候可能会不小心选择了eslint，所以如果不想让eslint检测，我们该怎么办呢，本文就详细的介绍了几种关闭方法，感兴趣的可以了解一下
2021-12-12
如何使用el-table实现纯前端导出(适用于el-table任意表格)
我们日常做项目,特别是后台管理系统,常常需要导出excel文件,这篇文章主要给大家介绍了关于如何使用el-table实现纯前端导出的相关资料,本文适用于el-table任意表格,需要的朋友可以参考下
2024-03-03
解决在Vue中使用axios用form表单出现的问题
今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10