首页 > 其他分享> > vue-点击切换li文本颜色

vue-点击切换li文本颜色

2021-06-12 17:33:12 作者：互联网

<!--
* @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>

标签：index,vue,冯陈,li,蒋沈韩,Vue,currentIndex,message,文本
来源： https://www.cnblogs.com/ABC-wangyuhan/p/14878631.html