[英]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.