vue.js 11
<html>
<head>
<title>
test11
</title>
</head>
<body>
<div id="app">
<button @click="changeSet">Change Set</button>
<div v-for="item in items" :key="item.key" @click="paint">
key:{{item.key}} / ID:{{item.id}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:'#app',
mounted:function(){
this.changeSet();
},
data:{
presetNumber :0,
items:[],
preset:[
[{id:1, key:1},
{id:2, key:1},
{id:3, key:2},
{id:4, key:3},
{id:5, key:5},
{id:6, key:8}
],
[
{id:7, key:1},
{id:8, key:2},
{id:9, key:3},
{id:10, key:4},
{id:11, key:5},
{id:12, key:6},
{id:13, key:7},
{id:14, key:8}
]
]
},
methods:{
changeSet:function(){
this.presetNumber = 1 - this.presetNumber;
this.items = JSON.parse(JSON.stringify(this.preset[this.presetNumber]));
},
paint:function(){
if(event.target.style.backgroud)
event.target.style.backgroud = null;
else
event.target.style.backgroud = 'yellow';
}
}
})
</script>
</body>
</html>
댓글
댓글 쓰기