當(dāng)前位置:首頁 > IT技術(shù) > 其他 > 正文

Vue 小實(shí)例 - 點(diǎn)擊那個(gè)文字 就變紅色
2022-05-31 17:11:16


<!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>請(qǐng)選擇你的愛好:</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 其實(shí)用到了一個(gè) 判斷的思維吧.


作者:??咸瑜??


本文摘自 :https://blog.51cto.com/u

開通會(huì)員,享受整站包年服務(wù)立即開通 >