VUE-使用v-bind和v-for動態變換列表樣式
阿新 • • 發佈：2020-12-24
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="vue.js"></script> <style type="text/css"> .active{ color: black; } .add2{ color: #ff0000; } </style> </head> <body> <div id="app"> <ul> <li class="active" :class="{'add2':index==dynamic}" v-for="(m, index) in movies" @click="dian(index)">{{m}}<li> </ul> </div> </body> <script> const app = new Vue({ el:'#app', data:{ movies:['喜洋洋與灰太狼', '迪迦奧特曼', '虹貓藍兔七俠傳', '藍精靈', '寶葫蘆'], dynamic: -1, cla: 'add2' }, methods:{ dian:function(index){ this.dynamic = index; } } }) </script> </html>
