vue操作dom元素的3種方法示例

更新時間：2020年09月20日 10:15:23 作者：我不是費圓

這篇文章主要給大家介紹了關于vue操作dom元素的3種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

總結

到此這篇關于vue操作dom元素的3種方法示例的文章就介紹到這了,更多相關vue操作dom元素方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue 短信驗證碼組件開發(fā)詳解
Vue.js（讀音 /vjuː/, 類似于 view）是一個構建數(shù)據驅動的 web 界面的庫。這篇文章主要介紹了Vue 短信驗證碼組件開發(fā)詳解,需要的朋友可以參考下
2017-02-02
vue@cli3項目模板怎么使用public目錄下的靜態(tài)文件
這篇文章主要介紹了vue@cli3項目模板怎么使用public目錄下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
基于Vue全局組件與局部組件的區(qū)別說明
這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
在Vue3項目中安裝和配置Three.js的操作代碼
Three.js是一個輕量級的WebGL封裝庫,用于在瀏覽器中渲染復雜的3D圖形,它提供了便捷的API,可以快速構建3D場景、對象和動畫,Vue.js是一個漸進式JavaScript框架,擅長構建用戶界面,本文給大家介紹了在Vue3項目中安裝和配置Three.js的操作,需要的朋友可以參考下
2024-12-12
一文搞懂VueJs中customRef函數(shù)使用
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
Vue 解決父組件跳轉子路由后當前導航active樣式消失問題
這篇文章主要介紹了Vue 解決父組件跳轉子路由后當前導航active樣式消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
解讀Vue組件注冊方式
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個頁面劃分成一個個小的模塊，每個模塊單獨定義，每個模塊就是一個組件。組件可以進行復用，A頁面和B頁面有一個相似的模塊，可以抽離成一個可局部修改的組件。
2021-05-05
Vue插件打包與發(fā)布的方法示例
插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對插件進行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下
2018-08-08
Vue中父組件向子組件通信的方法
可以使用props將父組件的數(shù)據傳給子組件。子組件在接受數(shù)據時要顯示聲明props。下面通過一個例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧
2017-07-07
一文帶你搞懂Vue.js如何實現(xiàn)全選反選功能
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)全選反選功能的相關知識,文中是示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以了解下
2025-01-01