vue实现类似jquery 给当前元素加类名 给兄弟元素去类名的方法

jquery中有个非常好用的方法,就是加类名去类名.诸如以下功能:

     

此时有这样的需求, 需要用户点击每个金额的时候,边框变颜色或者背景变颜色.这种功能可以说是烂大街.jquery时代轻松两行代码搞定.但是在vue中有的新人可以没用过.在这里说一下实现这个功能的方法.也很简单.

          简述思路:  1.写一个边框样式.     2. 动态绑定class     3.设置class的条件表达式.  4.添加click事件.

          主要是后两步.这里利用index值.具体代码如下: 

 <li :class="{Money:moneyShow == index}" v-for="(item, index) in data" :key="index" 
                @click="moneyBorder(index)">
                    <b>{{item.money}}元</b>
                    <span>{{item.conis}}淘书币</span>
 </li>


<script>
   export default {
        data() {
             return {
             moneyShow: ''
            }
    }

     methods: {
        moneyBorder(index) {
            this.moneyShow = index;
        }
    }
}
</script>

        这样你每次点击的时候 我们后去到你点击的index值,它代表着你点击的是哪个.然后马上把它附给条件表达式中的moneyshow;  只有当这两个值相等的时候   才显示边框;当然了,也就是说只有你当时点击的这个才显示边框.因为此时其他都为假了;

对了  css我没有写.大家自己写一下边框吧;