<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>directive用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" v-loading=isLoading> <div>{{data}}</div> <button @click="update">更新</button> </div> </body> </html> <script> new Vue({ el:"#app", data() { return{ isLoading:false, data:'' } }, methods:{ update() { this.isLoading = true setTimeout(() => { this.data = '獲取到的用戶數據' this.isLoading = false },3000) } } }) Vue.directive('loading',{ update(el,binding,vonde) { console.log(el,binding,vonde) if(binding.value) { const div = document.createElement('div') // createElement() 方法通過指定名稱創建一個元素 div.innerText = '加載中...' div.setAttribute('id','loading') // setAttribute() 方法添加指定的屬性，並為其賦指定的值。 div.style.position = 'fixed' div.style.top = 0 div.style.left = 0 div.style.width = '100%' div.style.height = '100%' div.style.display = 'flex' div.style.justifyContent = 'center' // justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。 div.style.alignItems = 'center' // align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。 div.style.color = 'white' div.style.background = 'rgba(0,0,0,0.7)' document.body.append(div) } else { document.body.removeChild(document.getElementById('loading')) //removeChild() 方法可從子節點列表中刪除某個節點。 } } }) </script>