vue.js如何操作dom

vue.js操作dom的方法：1、原生js操作dom，代碼為【const dom = getElementById(‘box')】；2、使用vue官方方法ref，代碼為【< div class=“set” ref=“up”>】。

本教程操作環(huán)境：windows7系統(tǒng)、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="新增">             <!--新增數(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>     </div> </template> <script>     export default {         name: "Index",         data(){             return {             }         },         methods:{             // 點擊新增按鈕，彈出新增數(shù)據(jù)源的彈框             showAddAlert(){                 this.$refs.addAlert.style.display = "block";             },             // 點擊 × 關閉新增數(shù)據(jù)源的彈框             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;  }  /* 添加數(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{   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;  }  /*新增彈框內(nèi)容部分*/  .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獲取元素是查找頁面所有，相當于“循環(huán)”所有元素直至找到需要的dom，但是vue是單頁面的，jQuery獲取dom并不只是獲取vue當前頁面，而是從根路由開始查找所有，當其他頁面出現(xiàn)相同的元素，也會被獲取到，而且jQuery操作的dom，如果是根據(jù)動態(tài)獲取數(shù)據(jù)渲染的，那么寫在mounted里的操作方法將會失效，必須放到updated里，這樣會導致有些操作被執(zhí)行多遍，所以還是不建議在vue中使用jQuery。

相關免費學習推薦：javascript學習教程