vue学习——v-for；@click；class绑定

<template>
   <div id="login">
     <div class="login-wrap">
        <ul class="menu-tab">
          <li :class="{'current':item.current}" v-for="item in menuTab" :key="item.id" @click="toggleMenu(item)">{{item.txt}}</li>
        </ul>
     </div>
   </div>
</template>

<script>
export default{
    name: 'login',
    data(){
      return{
        menuTab:[
          {txt:'登录',current:true},
          {txt:'注册',current:false},
        ],
        isActive:true
      }
    },
    created(){},
    mounted(){},
    //写函数的地方
    methods:{
      toggleMenu(data){
        this.menuTab.forEach(elem =>{//与先把所选元素的指定属性（这里就是文本的current样式清除，然后点击哪个，传进来数据的current则为true即被渲染）
          elem.current=false
        })
        data.current=true
      }
    }
}


</script>
<style lang="scss" scoped>
#login{
background-color: #344a5f;
height:100vh
}
.login-wrap{
  width:330px;
  margin:auto;
}
.menu-tab{
  text-align:center;
  li{
  display: inline-block;
  width:88px;
  line-height:36px;
  font-size: 14px;
  color: #fff;
  border-radius: 2px;
}
.current{
 background-color: black;
}
}

</style>

以上实现了登陆页面的登录以及注册的点击高光。其中重点为：第五行代码

v-for

其中v-for是循环显示item里的元素，这里item为menuTab，具体menuTab的内容在16行，（“item in item"这是初始格式，后面的item改为menuTab就可以了）key值一定要带上，表示唯一的表示

花括号里面的值，则为item.xxx 。”xxx“则是16行menuTab里的元素标识。这样就可以实现在li里面循环显示指定的内容了，这里即为”登录“，”注册“

class的绑定

class有很多种绑定形式，这里就介绍代码里用到的冒号形式的绑定

:class="{'active':isActive}" 这里active则是current，isActive写在下面决定是否绑定（31行，相当于总开关）那绑定到什么地方呢， 当然是item了，所以才会有:class="{'current':item.current}，不过首先是要在item也就是menuTab里面有所标注：

menuTab:[

{txt:'登录',current:true},

{txt:'注册',current:false},

],

这里current后面跟跟的值可以作为页面初始化的值，即登录接受current这个类的渲染，而注册不接受。所以初始化呈现出来的则是登录选项是被渲染的，即背景颜色为黑色。

@click

@click="toggleMenu(item)"即给点击事件赋予一个函数：

methods:{

toggleMenu(data){

this.menuTab.forEach(elem =>{//与先把所选元素的指定属性（这里就是文本的current样式清除，然后点击哪个，传进来数据的current则为true即被渲染）

elem.current=false

})

data.current=true

}

}

我是vue的小萌新啦，如果有不对的地方或用词不准确的地方请多指教啦，谢谢！