<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<style>
????????.red?{
????????????color:?red;
????????}
????</style>
</head>
<body>
<script?src="js/vue.js"></script>
<div?id="app">
????<h2>請選擇你的愛好:</h2>
????<ul?style="list-style:?none;?">
????????????<li?@click="red(i)"??:class="{red:(index?==?i)}"?v-for="(item,i)?in?array">{{item}}</li>
????</ul>
</div>
<script>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????array:["唱歌","睡覺","跆拳道","跑步","羽毛球","滑雪","下棋","游泳"],
????????????index:0
????????},
????????methods:{
????????????red:function?(i){
????????????????this.index?=?i;
????????????????console.log(this.index?+"?---??"?+?i);
????????????}
????????}
????})
</script>
</body>
</html>
?
?
emmmmmm 其實用到了一個 判斷的思維吧.
作者:??咸瑜??
本文摘自 :https://blog.51cto.com/u