功能需求

实现点击选项，该选项变为高亮功能

获取点击元素的数组下标

首先要声明一个数组，然后使用for循环在页面中读取出来，并且点击其中一个选项可以在控制台获取到对应在数组的下标值。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:200px;height: 30px; background: #ccc;margin-bottom: 10px;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <div class="box" v-for="(item,key) in listArr" @click="clickBox(key)">
           <!-- 使用for循环语句，将元素值和元素的下标读取出来 -->
           <!-- click事件绑定的方法中将数组的下标传递进去，这样可以知道点击的元素在数组中的下标 -->
           {{item}}
        </div>
   </div> 
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            listArr:[
                "阿呆","弓箭手","轮椅师"
            ]
        },
        methods:{
            clickBox(e){
                console.log(e)
            }
        }
    })
</script>

测试页面:
可以看到能正确打印出所点击的选项的下标。

使用变量存储点击的下标值

之后需要将控制台中输出的下标值用一个变量存储,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:200px;height: 30px; background: #ccc;margin-bottom: 10px;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <div class="box" v-for="(item,key) in listArr" @click="clickBox(key)">
           <!-- 使用for循环语句，将元素值和元素的下标读取出来 -->
           <!-- click事件绑定的方法中将数组的下标传递进去，这样可以知道点击的元素在数组中的下标 -->
           {{item}}
        </div>
        <h1>{{num}}</h1>
   </div> 
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            listArr:[
                "阿呆",
                "弓箭手",
                "轮椅师",
                "江"
            ],
            num:0
        },
        methods:{
            clickBox(e){
                console.log(e)
                this.num=e // 将点击的下标赋值给num
            }
        }
    })
</script>

第39行将传递来的参数赋值给num
第20行将num呈现在页面上

测试页面:

页面上显示下标值。

选中判断并更改样式

接下来就是判断该元素是否被选中，如果未被选中则样式更改为被选中的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:200px;height: 30px; background: #ccc;margin-bottom: 10px;}
        .box.active{ background:orange;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <div class="box" :class="{active:num==key?true:false}" v-for="(item,key) in listArr" @click="clickBox(key)">
           <!-- 使用for循环语句，将元素值和元素的下标读取出来 -->
           <!-- click事件绑定的方法中将数组的下标传递进去，这样可以知道点击的元素在数组中的下标 -->
           {{item}}
        </div>
        <h1>{{num}}</h1>
   </div> 
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            listArr:[
                "阿呆",
                "弓箭手",
                "轮椅师",
                "江"
            ],
            num:0
        },
        methods:{
            clickBox(e){
                console.log(e)
                this.num=e // 将点击的下标赋值给num
            }
        }
    })
</script>