vue點選變色
阿新 • • 發佈:2018-12-28
<template> <div> <router-link to="/w1">點選回去</router-link> <div v-for="(x,index) in list" v-bind:class="{red:isred===index}" @click="change(index)"> {{x.id}}-{{x.title}}-{{x.author}} </div> </div> </template> <script> exportdefault { name: 'News', data () { return { list:[{id:1,title:"娛樂新聞",author:"小李"}, {id:2,title:"軍事新聞",author:"小王"}, {id:3,title:"財經新聞",author:"小張"},], isred:-1 } }, methods: { change:function(index){ this.isred=index } } } </script> <!-- Add "scoped" attribute to limit CSS to thiscomponent only --> <style scoped> .red{ background-color: red; } </style>