From 855ac57c74235521d11de2eb73e158090caf5b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BA=A6=E5=B8=8C?= <318020957@qq.com>
Date: Fri, 8 Apr 2022 17:36:41 +0800
Subject: [PATCH] 4.8

---
 .../index.html"                               | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 "\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html"
diff --git "a/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html" "b/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html"
new file mode 100644
index 0000000..0596797
--- /dev/null
+++ "b/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html"
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <title>大变懒羊羊</title>
+</head>
+<style>
+    div{
+        height:80vh;
+        width: 80vh;
+    }
+</style>
+<body>
+    <div id="main">
+        <div v-images="imgurl" @click="click"></div>
+
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13453102950%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=a11a7d4e584da97031ac36737abec655',
+            imgurl1:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13453102950%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=a11a7d4e584da97031ac36737abec655',
+            imgurl2:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2345839304-05FB915BAF945B1ECEB19E0F61E93DB6%2F0%3Ffmt%3Djpg%26size%3D26%26h%3D431%26w%3D426%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=85a53beb62545391a855caf50de03a27'
+        },  
+        methods:{
+            click:function(){
+                if(this.imgurl!=this.imgurl2){
+                    this.imgurl=this.imgurl2;
+                }else{
+                    this.imgurl=this.imgurl1;
+                }
+            }
+        },
+        directives:{
+            images:{
+                inserted:function(el,binding){
+                    console.log(el);
+                    // let imgurl=binding.value;
+                    let imgurl=binding.value;
+                    console.log(imgurl);
+                    let image = new Image();
+                    image.src = imgurl;
+                    image.onload=function(){
+                        console.log(image.width);
+                        console.log(image.height);
+                        el.style.background=`url(${imgurl})`;
+                        el.style.backgroundSize='cover';
+                    }
+                    
+                },
+                update:function(el,binding){
+                    console.log(el);
+                    // let imgurl=binding.value;
+                    let imgurl=binding.value;
+                    console.log(imgurl);
+                    let image = new Image();
+                    image.src = imgurl;
+                    image.onload=function(){
+                        console.log(image.width);
+                        console.log(image.height);
+                        // el.style.width=image.width+'px';
+                        // el.style.height=image.height+'px';
+                        el.style.background=`url(${imgurl})`;
+                        el.style.backgroundSize='cover';
+                    }
+                }
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

