vue3 :deep()的使用教程

更新時(shí)間：2023年10月19日 15:12:40 作者：明似水

對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧

vue3 :deep()的使用

前言

對應(yīng)前端小白來說，一看到:deep()這些模式的用法就不理解是啥意思，下面簡單介紹一下:deep()是什么以及如何使用。

一、:deep()是什么？ :deep()是可以改變css解析時(shí)私有屬性的樣式常見使用場景: 如改變輸入框的背景顏色

我們找到解析時(shí)找到輸入框的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>

總結(jié)

這個(gè)實(shí)現(xiàn)例子雖然簡單，但是對于小白來說，還是要一點(diǎn)時(shí)間去理解的，希望能幫助到您！

vue3 deep用法

:deep(.van-grid-item__content) {
        padding-bottom: 0;
 }
:deep()

到此這篇關(guān)于vue3 :deep()的使用的文章就介紹到這了,更多相關(guān)vue3 :deep()的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
:deep()

相關(guān)文章

VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件之 Drawer 抽屜，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
uniapp實(shí)現(xiàn)紅包動(dòng)畫效果代碼實(shí)例(vue3)
uniapp作為一種基于Vue.js的前端框架,實(shí)現(xiàn)了一套代碼多端運(yùn)行的理念,成為了眾多開發(fā)者的首選,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)紅包動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue父子組件的通信方法(實(shí)例詳解)
這篇文章主要介紹了vue父子組件的通信的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下
2023-12-12
vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決
這篇文章主要介紹了vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue+django項(xiàng)目部署全過程
文章介紹了如何部署一個(gè)多服務(wù)器架構(gòu)的項(xiàng)目,包括前端Vue和后端Django的部署,以及如何使用Nginx進(jìn)行反向代理和負(fù)載均衡,數(shù)據(jù)庫的主從復(fù)制和集群配置,以及靜態(tài)文件和反向代理的配置
2026-02-02
Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用
vue-countup-v3 插件是一個(gè)基于 Vue3 的數(shù)字動(dòng)畫插件，用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動(dòng)畫效果的計(jì)數(shù)器，本文主要介紹了Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用，感興趣的可以了解一下
2023-10-10
Vue路由router詳解
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2021-10-10
基于Vue單文件組件詳解
下面小編就為大家?guī)硪黄赩ue單文件組件詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09