码迷,mamicode.com
首页 > 其他好文 > 详细

vue-点击切换li文本颜色

时间:2021-06-13 10:25:03      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:color   ESS   file   body   nbsp   version   opp   drm   sso   

<!--
* @description 参数1
* @fileName shoppint
* @author userName
* @date 2021-06-12 17:02:03
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>shoppint</title>
    <style>
        .active{
            color: red;
        }
    </style>
    <script crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg=="
    src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js">
   </script>

</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <ul>
           <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
               {{ item }} -{{index}}-{{currentIndex}}
           </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: #app,
            data() {
                return {
                    message:Hello Vue,
                    movies:["赵钱孙李","周吴郑王","冯陈褚卫","蒋沈韩杨"],
                    currentIndex:0    
                }
            },
            methods: { // 方法
                liClick(index){ 
                    this.currentIndex = index;
                }
            }
        });

    </script>
</body>

</html>

 

vue-点击切换li文本颜色

标签:color   ESS   file   body   nbsp   version   opp   drm   sso   

原文地址:https://www.cnblogs.com/ABC-wangyuhan/p/14878631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!