背景

最近有一位同學來問我如何動態改變 Vue 專案中的背景圖片，這個問題乍一想還是蠻簡單的，利用 Vue 的雙向繫結特性就可以完成，但是在實際編寫程式碼的過程中遇到了很多問題。比如說在 Vue 中 require 是不允許引入變數的，只能這樣寫：

require('./assets/image.jpg')

不能傳變數的話就談不上動態改變了，所以我們考慮換一種解決方式。

解決方案

這位同學問我的時候發過來一段程式碼，簡化一下大致是這個樣子：

<template>
  <div id="app" :style="{background: 'url('+imageUrl+')'}">
  </div>
</template>

<script>
export default {
  data(){
    return {
      imageUrl: require("./assets/2.jpg")
    }
  }
}
</script>
 

上面提到，require 是不能傳入變數的，我們就得另尋其他辦法。換種思路，既然我們不能改變 require 的引數值，那我們能不能改變整個 imageUrl 變數的值呢，能想到這裡基本上就可以實現功能了。我們假設現在的需求是這個樣子的：要求實現一個元件，這個元件能夠根據傳入的引數動態改變背景圖片。

那我們就假設傳入的引數為 imageNo，根據其值來改變背景圖片，程式碼實現如下：

<template>
  <div id="app" :style="{background: 'url('+imageUrl+')'}">
  </div>
</template>

<script>
export default {
  name: 'App',
  props: ['imageNo']
  data(){
    return {
      url1: require("./assets/1.jpg"),
      url2: require("./assets/2.jpg")
    }
  },
  computed: {
    imageUrl:function() {
      switch(this.imageNo){
        case 0:
          return this.url1
        case 1:
          return this.url2
        default:
          return this.url1
      }
    }
  }
}
</script>
 

總結

在這裡應該考慮下 require 的一些特性，什麼時候能用什麼時候不能用，既然不能傳入變數那就直接替換掉他的值，這樣的話就可以最終實現需求。