站長資訊網vue.js操作dom的方法：1、原生js操作dom，代碼為【const dom = getElementById(‘box')】；2、使用vue官方方法ref，代碼為【< div class=“set” ref=“up”>】。
本教程操作環境：windows7系統、Vue2.9.6版，DELL G3電腦，該方法適用于所有品牌電腦。
【相關文章推薦：vue.js】
vue.js操作dom的方法：
1、原生js操作dom
const dom = getElementById(‘box')
2、vue官方方法：ref
vue中的ref是把當前dom元素 “ 抽離出來 ” ，只要通過 this.$refs就可以獲取到
< div class=“set” ref=“up”>
.set是我們要操作的dom對象，它的ref是 up
@click=“Alert”
給父元素一個點擊事件，
接下來我們來編寫這個方法
methods:{ ? this.$refs.addAlert.style.display = “block”; }
CSS還要嗎？
那我把代碼全粘過來你們自己看吧
<template> <div id="app"> <div class="index-box"> <!--新增按鈕--> <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增"> <!--新增數據源彈框--> <div class="addDbSource-alert" ref="addAlert"> <div class="addAlert-top"> <!--添加數據源--> <input type="button" value="×" class="addAlert-close" @click="closeAddAlert"> </div> <div class="addAlert-content"> <div style="height: 1000px;"></div> </div> </div> </div> </div> </template> <script> export default { name: "Index", data(){ return { } }, methods:{ // 點擊新增按鈕，彈出新增數據源的彈框 showAddAlert(){ this.$refs.addAlert.style.display = "block"; }, // 點擊 × 關閉新增數據源的彈框 closeAddAlert(){ this.$refs.addAlert.style.display = "none"; }, }, created(){ } } </script> <style scoped> #app{ width:100%; height:100%; overflow-y:auto; } /* 容器 */ .index-box{ width: 100%; height: 100%; background: #212224; display: flex; } /* 添加數據源按鈕 */ #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; } /*新增數據源彈框*/ .addDbSource-alert{ position: fixed; top:0;left:0;right:0;bottom:0; margin:auto; width: 4rem;height: 4rem; background: #2b2c2f; display: none; } /*新增彈框頭部*/ .addAlert-top{ width: 100%; height: 50px; background: #1dd3d3; line-height: 50px; font-size: 20px; box-sizing: border-box; padding-left: 20px; } /*新增彈框關閉*/ .addAlert-close{ background: #1dd3d3; border: none; font-size: 30px; cursor: pointer; float: right; margin-right: 20px; margin-top: 5px; } /*新增彈框內容部分*/ .addAlert-content{ width: 100%; box-sizing: border-box; padding: 0px 30px 20px; } /* 滾動條效果 */ /* 設置滾動條的樣式 */ .addAlert-content::-webkit-scrollbar { width: 5px; } /* 滾動槽 */ .addAlert-content::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1); border-radius: 10px; */ } /* 滾動條滑塊 */ .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>
CSS比正文和腳本加起來都多，如果你能看懂CSS，沒理由學不會 ref
還有第三種方法，jQuery 操作dom，看完以后直呼不敢用
3、jQuery操作dom
? 只要拿jQuery的選擇器，選中相應的dom進行操作就可以了，但是大家都知道jQuery獲取元素是查找頁面所有，相當于“循環”所有元素直至找到需要的dom，但是vue是單頁面的，jQuery獲取dom并不只是獲取vue當前頁面，而是從根路由開始查找所有，當其他頁面出現相同的元素，也會被獲取到，而且jQuery操作的dom，如果是根據動態獲取數據渲染的，那么寫在mounted里的操作方法將會失效，必須放到updated里，這樣會導致有些操作被執行多遍，所以還是不建議在vue中使用jQuery。
相關免費學習推薦：javascript學習教程
