簡體   English   中英

如何更改 Vue.js 中某個 div 的顏色

[英]How can I change the colour of a certain div in Vue.js

我目前有一個由 div 制成的空白方塊網格。 當我點擊一個網格空間時,整個網格會改變顏色。 我試圖讓我單擊以更改顏色的正方形(div)。 這就是我的代碼的樣子。 任何幫助,將不勝感激。

<div id="app">
  <section class="grid-container">
    <div :style="isClicked ? {'background': 'green'} : null" @click="toggleIsClicked" v-for="square in grid" :square="square" v-bind:class="space">{{square}}</div>
  </section>
</div>

<script>
    var app = new Vue({
        el: '#app',
        
        props: ['square'],
        data:{
            isClicked: false,
            space: "space",

            grid:
            ["","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","","",
            "","","","","","","","","",""]
        },
        methods:{
            toggleIsClicked : function() {
                if(!this.isClicked){
                    this.isClicked = true;
                    console.log(this.key);
                }else{
                    this.isClicked = false;
                }
            },

        }
        
    });
    </script>

https://codesandbox.io/s/immutable-worker-pkqkd?file=/src/App.vue:332-762

<div id="app">
   <section class="grid-container">
      <div
        :key="square.id"
        v-for="(square,index) in grid"
        :style="square.clicked ? style : null"
        @click="()=>onClick(index)"
      >{{square.text}}</div>
   </section>
</div>

<script>
  var app = new Vue({
   el: '#app',
        
   data() {
    return {
      space: "space",
      style: { background: "green" },
      grid: []
    };
   },
   methods: {
    onClick: function(index) {
      this.grid[index].clicked = !this.grid[index].clicked;
    }
   },
   mounted() {
    let squares = [];
    for (let i = 0; i < 100; i++) {
      let id = Math.random() * 10000000;
      squares.push({ text: "#", clicked: false, id: id });
    }
    this.grid = squares;
   }
 });
</script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM