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()

Vue3使用路由VueRouter4的简单示例
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-07-07
vue组件代码分块和懒加载讲解
这篇文章主要介绍了vue组件代码分块和懒加载讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue-Luckysheet的使用方法及遇到问题解决方法
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源，这篇文章主要介绍了Vue-Luckysheet的使用方法,需要的朋友可以参考下
2022-08-08
vue-cli+webpack在生成的项目中使用bootstrap实例代码
本篇文章主要介绍了vue-cli+webpack在生成的项目中使用bootstrap实例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-05-05
vue2中使用axios及axios拦截器的配置教程
众所周知Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js中,下面这篇文章主要给大家介绍了关于vue2中使用axios及axios拦截器的配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue项目中使用axios上传图片等文件操作
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧
2017-11-11
ElementUI多个子组件表单的校验管理实现
这篇文章主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
详解vue-cli快速构建项目以及引入bootstrap、jq
本篇文章主要介绍了vue-cli快速构建项目以及引入bootstrap、jq，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue中如何给静态资源增加路由前缀
这篇文章主要介绍了vue中如何给静态资源增加路由前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue-model实现简易计算器
这篇文章主要为大家详细介绍了vue-model实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08