vue 切換div背景圖片

切換背景圖片：

1.定義數據列表及屬性。

 /** 燈列表 */
 protected lamps: Array<any>= [{Name: "1號燈" , Open: false},{Name: "2號燈", Open: false}];

2.定義不同狀態下的css樣式。

.close
{
    width: 100%;
    height: 100%;
    background-image: url("close_light.png");
    background-size:50% 50% ;
    background-repeat:no-repeat ;
    background-position: 50% 30%;
}
.open
{
    width: 100%;
    height: 100%;
    background-image: url("open_light.png");
    background-size:50% 50% ;
    background-repeat:no-repeat ;
    background-position: 50% 30%;
}

 

3.對class進行綁定操作。

4.根據“Open”屬性的值切換class的名稱。

 <div :class="item.Open === false ? 'close' : 'open'" @click="click(item)">
      <div class="name">{{item.Name}}</div>
 </div>

 

完整代碼如下

<template>
    <div>
        <div> 
            <label>背景圖片切換</label>
        </div>
        <div class="content">
            <div class="lamp" v-for="(item,index) in lamps" :key="index">
                <div :class="item.Open === false ? 'close' : 'open'" @click="click(item)">
                    <div class="name">{{item.Name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component"

/**
 * 更改div背景圖片
 */
@Component({})
export default class ChangeBackgroundImage extends Vue {
  
  /** 燈列表 */
 protected lamps: Array<any>= [{Name: "1號燈" , Open: false},{Name: "2號燈", Open: false}];
  
  /**
   * 點擊事件
   */
  protected click(item): void
  {
        item.Open = item.Open === false ? true : false;
        let message = (item.Open ? "開啟" : "關閉") + item.Name;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content
{
    width: 100%;
    height:100%;

    float:left;
    margin-top:20px;
    
    position:relative;
    text-align: center;
    display: -webkit-flex; 
    align-items:center;
    justify-content:center;
}
.lamp
{
    height:100px;
    width: 100px;
    display: inline-block;
    margin-left:2%;
    margin-right:3%;
    margin-top:0.5%;
    opacity:0.9;
}
.close
{
    width: 100%;
    height: 100%;
    background-image: url("close_light.png");
    background-size:50% 50% ;
    background-repeat:no-repeat ;
    background-position: 50% 30%;
}
.open
{
    width: 100%;
    height: 100%;
    background-image: url("open_light.png");
    background-size:50% 50% ;
    background-repeat:no-repeat ;
    background-position: 50% 30%;
}

.close:hover,
.open:hover
{
    cursor: pointer;
}

.name
{
    font-size:12px;
    padding-top:100%
}
</style>

 

 

實現效果圖：