Vue动态切换背景图

小灰灰 2022-09-11 03:14 168阅读 0赞

最近在改写一个网站，抽离公共组件的时候，发现一个nav组件图标是用background-image显示的。把基本的框架抽离出去，具体菜单项用插槽，然后图片需要用props传参。写了一个小案例。  
**父组件**  
Home.vue

<template>
      <div class="home">
        <button @click="changeBackground">切换图片背景</button>
        <br>
        <br>
        <HelloWorld :bgPath="bgPath"></HelloWorld>
      </div>
    </template>
    
    <script>
    import HelloWorld from '@/components/HelloWorld.vue';
    //import引入图片获得真实的路径
    import picPath from '@/views/images/seeSee.jpg';
    import picPath2 from '@/views/images/lai.jpg';
    
    export default {
          
      name: 'Home',
      components: {
          
        HelloWorld
      },
      data() {
          
        return {
          
          bgPath: picPath
        }
      },
      methods: {
          
        //测试切换背景图片
        changeBackground() {
          
          this.bgPath = picPath2;
        }
      }
    }
    </script>

**子组件**  
HelloWorld.vue

<template>
      <div class="hello" :style="bgStyle"></div>
    </template>
    
    <script>
    export default {
          
      name: 'HelloWorld',
      props: {
          
        bgPath: {
          
          type: String,
          default: ''
        },
      },
      computed: {
          
        //这里可以用计算属性也可以用watch
        bgStyle() {
          
          return {
          
            backgroundImage: 'url(' + this.bgPath + ')'
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .hello {
          
      width: 400px;
      height: 200px;
      border: 5px solid red;
      background-repeat: no-repeat;
      background-size: cover;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换背景图

JS点击切换背景图有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [

古城微笑少年丶/ 2024年03月31日 15:36/ 0 赞/ 49 阅读

相关 vue 动态切换列表active样式

<template v-for="index of 10"> <div :key="index" :class="{ 'acti

╰半夏微凉°/ 2022年11月18日 13:53/ 0 赞/ 201 阅读

相关 Vue入门实战-轮播图切换

效果图 ![在这里插入图片描述][20210206150456249.gif] 实现代码 <!DOCTYPE html> <html lang="

女爷i/ 2022年10月28日 14:20/ 0 赞/ 115 阅读

相关 Vue动态切换背景图

最近在改写一个网站，抽离公共组件的时候，发现一个nav组件图标是用background-image显示的。把基本的框架抽离出去，具体菜单项用插槽，然后图片需要用props传参。

小灰灰/ 2022年09月11日 03:14/ 0 赞/ 169 阅读

相关 Vue+Openlayer实现gif动态图

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFF

刺骨的言语ヽ痛彻心扉/ 2022年09月08日 14:47/ 0 赞/ 264 阅读

相关 vue当背景图需要切换的时候

当一个页面的背景图需要根据，你的变化而变化的时候，需要吧背景图片设置为一个变量，那么该怎么做呢? ![在这里插入图片描述][5abeb88f40444755867d903

╰+攻爆jí腚メ/ 2022年09月05日 06:00/ 0 赞/ 153 阅读

相关 jquery 动态点击li标签切换背景颜色

废话不多讲老规矩先上图看效果： ![70][] <script type="text/javascript" src="/jquery/jquery.js"></s

清疚/ 2022年05月24日 07:47/ 0 赞/ 223 阅读

相关 vue背景渐变切换动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

短命女/ 2022年05月21日 01:55/ 0 赞/ 277 阅读

相关 vue引入图片和背景图

1，引入图片，在img元素中用：src绑定地址的 ![70][] 2，直接在样式中引用的 ![70 1][] [70]: /images/20220510

ゝ一世哀愁。/ 2022年05月10日 03:46/ 0 赞/ 254 阅读

相关 CSS Vue 切换背景颜色

原文演示及链接： [https://codepen.io/richardtallent/pen/yvpERW/][https_codepen.io_richardtallent

短命女/ 2022年01月30日 06:41/ 0 赞/ 287 阅读