<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://bbs.csdn.net/topics/js/vue.js"></script>
<style>
.color{
color: red;
}
</style>
</head>
<body>
<div id="app">
<img src="https://img.uj5u.com/2020/11/03/153274030623471.png">
<div :class="{color:isColor}">零基礎學JavaScript</div>
<button @click="isColor1=!isColor1">選中</button>
<img src="https://img.uj5u.com/2020/11/03/153274030623472.png">
<div :class="{color:isColor}">零基礎學HTML5+CSS3</div>
<button @click="isColor=!isColor">選中</button>
<img src="https://img.uj5u.com/2020/11/03/153274030623473.png">
<div :class="{color:isColor}">JavaScript精彩編程200例</div>
<button @click="isColor=!isColor">選中</button>
<img src="https://img.uj5u.com/2020/11/03/153274030623474.png">
<div :class="{color:isColor}">HTML5+CSS3精彩編程200例</div>
<button @click="isColor=!isColor">選中</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isColor:false
}
})
</script>
</body>
</html>
uj5u.com熱心網友回復：
其實最好的是給將每一個圖片 div 和按鈕用一個父級元素，然后回圈給所有按鈕系結單擊事件，點擊后獲取父級元素下的div使用style改變字體顏色即可，既然不是用父級元素包裹就要多一個步驟先獲取所有的div根據點擊按鈕的索引去改變div的字體顏色uj5u.com熱心網友回復：
<div :class="{color:color===1}">零基礎學JavaScript</div>
<button @click="color=1">選中</button>
var vm=new Vue({
el:"#app",
data:{
color:0
}
})
如果想點擊后可以來回切換：
<div :class="{color:color===1}">零基礎學JavaScript</div>
<button @click="color=color===1?0:1">選中</button>
<div :class="{color:color===2}">零基礎學JavaScript</div>
<button @click="color=color===2?0:2">選中</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/200590.html
標籤：JavaScript
下一篇：求助 求和最小時間