• 當前位置:首頁 > IT技術 > 其他 > 正文

    Vue 小實例 - 點擊那個文字 就變紅色
    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>請選擇你的愛好:</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

    開通會員,享受整站包年服務
    国产呦精品一区二区三区网站|久久www免费人咸|精品无码人妻一区二区|久99久热只有精品国产15|中文字幕亚洲无线码