快捷導(dǎo)航

VUE中操作dom元素的幾種方法(最新推薦)

更新時(shí)間：2022年12月06日 09:57:42 作者：https://blog.csdn.net/CD_promise/article/details/113524062

本文給大家總結(jié)了Vue中操作dom元素的多種方法，每種方法結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧

VUE中操作dom元素

方法一：

訪問(wèn)子組件實(shí)例或子元素
盡管存在 prop 和事件，有的時(shí)候你仍可能需要在 JavaScript 里直接訪問(wèn)一個(gè)子組件。為了達(dá)到這個(gè)目的，你可以通過(guò) ref 這個(gè) attribute 為子組件賦予一個(gè) ID 引用。例如：

<base-input ref="usernameInput"></base-input>

現(xiàn)在在你已經(jīng)定義了這個(gè) ref 屬性的組件里，你可以使用：

this.$refs.usernameInput
來(lái)訪問(wèn)這個(gè) 實(shí)例，以便不時(shí)之需。比如程序化地從一個(gè)父級(jí)組件聚焦這個(gè)輸入框。在剛才那個(gè)例子中，該組件也可以使用一個(gè)類(lèi)似的 ref 提供對(duì)內(nèi)部這個(gè)指定元素的訪問(wèn)，例如：

<input ref="input">

甚至可以通過(guò)其父級(jí)組件定義方法：

methods: {
// 用來(lái)從父級(jí)組件聚焦輸入框

 focus: function () {
    this.$refs.input.focus()
  }
}

這樣就允許父級(jí)組件通過(guò)下面的代碼聚焦里的輸入框：

this.$refs.usernameInput.focus()

當(dāng) ref 和 v-for 一起使用的時(shí)候，你得到的 ref 將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。

$refs 只會(huì)在組件渲染完成之后生效，并且它們不是響應(yīng)式的。這僅作為一個(gè)用于直接操作子組件的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn) $refs。

方法二：

使用自定義指令
// 注冊(cè)一個(gè)全局自定義指令 v-focus

Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注冊(cè)局部指令，組件中也接受一個(gè) directives 的選項(xiàng)：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

擴(kuò)展：

vue操作dom元素的三種方法介紹和分析

相信大家在做項(xiàng)目的時(shí)候，肯定會(huì)遇到這樣的問(wèn)題：我點(diǎn)擊新增按鈕，需要彈出個(gè)彈框，然后我點(diǎn)擊對(duì)應(yīng)的關(guān)閉按鈕，關(guān)閉彈框，但是新增按鈕和關(guān)閉按鈕操作的是另一個(gè)元素，所以需要獲取dom元素進(jìn)行操控，那么在vue中怎么操作dom呢？

以下是常用的三種方法：

1、jQuery操作dom（推薦指數(shù)：★☆☆☆☆）：

只要拿jQuery的選擇器，選中相應(yīng)的dom進(jìn)行操作就可以了，但是大家都知道jQuery獲取元素是查找頁(yè)面所有，相當(dāng)于“循環(huán)”所有元素直至找到需要的dom，但是vue是單頁(yè)面的，jQuery獲取dom并不只是獲取vue當(dāng)前頁(yè)面，而是從根路由開(kāi)始查找所有，當(dāng)其他頁(yè)面出現(xiàn)相同的元素，也會(huì)被獲取到，而且jQuery操作的dom，如果是根據(jù)動(dòng)態(tài)獲取數(shù)據(jù)渲染的，那么寫(xiě)在mounted里的操作方法將會(huì)失效，必須放到updated里，這樣會(huì)導(dǎo)致有些操作被執(zhí)行多遍，所以還是不建議在vue中使用jQuery。

2、原生js操作dom（推薦指數(shù)：★★★★☆）：

原生js獲取dom就很簡(jiǎn)單了，例如：根據(jù)id、class、當(dāng)前元素的上一個(gè)元素......

3、vue官方方法：ref（推薦指數(shù)：★★★★★）：

vue中的ref是把當(dāng)前dom元素 “ 抽離出來(lái) ” ，只要通過(guò) this.$refs就可以獲取到（注意this指向），此方法尤其適用于父元素需要操作子組件的dom元素，這也是子傳父?jìng)鬟f數(shù)據(jù)的一種方法

下面讓我來(lái)看個(gè)案例：

設(shè)置了一個(gè)button按鈕，通過(guò)點(diǎn)擊事件，然后彈出新增的彈框 , 然后點(diǎn)擊 “ × ”的button按鈕，關(guān)閉彈框，此時(shí)需要操作彈框的dom元素，通過(guò)ref定義一個(gè)名字，然后在方法中通過(guò) this.$refs.名字獲取對(duì)應(yīng)的dom

<template>
    <div  class="index-box">
        <!--新增按鈕-->
        <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
        <!--新增數(shù)據(jù)源彈框-->
        <div class="addDbSource-alert" ref="addAlert">
            <div class="addAlert-top">
                添加數(shù)據(jù)源
                <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
            </div>
            <div class="addAlert-content">
                <div style="height: 1000px;"></div>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "Index",
        data(){
            return {
 
            }
        },
        methods:{
            // 點(diǎn)擊新增按鈕，彈出新增數(shù)據(jù)源的彈框
            showAddAlert(){
                this.$refs.addAlert.style.display = "block";
            },
            // 點(diǎn)擊 × 關(guān)閉新增數(shù)據(jù)源的彈框
            closeAddAlert(){
                this.$refs.addAlert.style.display = "none";
            },
        },
        created(){
 
        }
    }
</script>
 
<style scoped>
    /* 容器 */
    .index-box{
        width: 100%;
        height: 100%;
        background: #212224;
        display: flex;
    }
    /* 添加數(shù)據(jù)源按鈕 */
    #DbManagement-addBtn {
        width: 100px;
        height: 45px;
        border: none;
        border-radius: 10px;
        background: rgba(29, 211, 211, 1);
        box-shadow: 2px 2px 1px #014378;
        margin-left: 20px;
        margin-top: 17px;
        cursor: pointer;
        font-size: 20px;
    }
    /*新增數(shù)據(jù)源彈框*/
    .addDbSource-alert{
        width: 500px;
        height: 600px;
        background: #2b2c2f;
        position: fixed;
        left: calc(50% - 250px);
        top: calc(50% - 300px);
        display: none;
    }
    /*新增彈框頭部*/
    .addAlert-top{
        width: 100%;
        height: 50px;
        background: #1dd3d3;
        line-height: 50px;
        font-size: 20px;
        box-sizing: border-box;
        padding-left: 20px;
    }
    /*新增彈框關(guān)閉*/
    .addAlert-close{
        background: #1dd3d3;
        border: none;
        font-size: 30px;
        cursor: pointer;
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    /*新增彈框內(nèi)容部分*/
    .addAlert-content{
        width: 100%;
        height: 550px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0px 30px 20px;
    }
    /* 滾動(dòng)條效果 */
    /* 設(shè)置滾動(dòng)條的樣式 */
    .addAlert-content::-webkit-scrollbar {
        width: 5px;
    }
    /* 滾動(dòng)槽 */
    .addAlert-content::-webkit-scrollbar-track {
        /* -webkit-box-shadow: inset 0 0 6px  rgba(40, 42, 44, 1);
        border-radius: 10px; */
    }
    /* 滾動(dòng)條滑塊 */
    .addAlert-content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(29, 211, 211, 1);
        /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
    }
    .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(29, 211, 211, 1);
    }
</style>

效果圖：