首頁 > web前端 > Vue.js > vue.js如何操作dom

vue.js如何操作dom

coldplay.xixi
發布: 2023-01-13 00:45:05
原創
4893 人瀏覽過

vue.js操作dom的方法:1、原生js操作dom,程式碼為【const dom = getElementById('box')】;2、使用vue官方方法ref,程式碼為【< div class =“set” ref=“up”>】。

vue.js如何操作dom

本教學操作環境:windows7系統、Vue2.9.6版,DELL G3電腦,此方法適用於所有品牌電腦。

【相關文章推薦:vue.js

#vue.js操作dom的方法:

1、原生js操作dom

const dom = getElementById(‘box&#39;)
登入後複製

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學習教學

以上是vue.js如何操作dom的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
javascript - vue.js與html頁面之間的跳轉
來自於 1970-01-01 08:00:00
0
0
0
vue.js - ViewModel和Controller有什麼差別?
來自於 1970-01-01 08:00:00
0
0
0
javascript - 有大神做過vue.js spa單頁的SEO嗎?
來自於 1970-01-01 08:00:00
0
0
0
使用Vue.js Web元件與Pinia
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板