Vue按键切换效果实现“登录和注册”

Vue按键切换效果实现“登录和注册”

1. 先演示我自己的想法：简单理解就是使用data-找到指定的改变的元素，这是两个按钮可以这么写，要是多了的话指定写懵逼，哈哈哈。

<template>
  <div>
    <div class="roll_header">
      <div class="flex_item" ref="lo1" data-id="lo1"  @click="changeColor" >登录</div>
      <div class="flex_item "ref="re2" data-id="re2"  @click="changeColor">注册</div>
    </div>
    <div class="roll_bar">
      <div class="bar_item"></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  methods:{
    changeColor(e){
      let value1=e.target.dataset.id;
      if(value1=="lo1"){
        // 改变dom元素字体颜色
        this.$refs.lo1.style.color="coral";
        this.$refs.re2.style.color="rgb(121, 121, 121)";
      }
      else{
        this.$refs.re2.style.color="coral";
        this.$refs.lo1.style.color="rgb(121, 121, 121)";
      }
    }
  }
};
</script>

2. 这是合理的写法，准确的描述了vue的设计理念用数据控制视图即显示效果

<template>
  <div>
    <div class="roll_header">
      <div class="flex_item" v-for="(ti,index) in pagetitle" :key="ti" @click="changeColor($event,index)" :class="{'changecolor':index==temps}">{{ti}}</div>
    </div>
    <div class="roll_bar">
      <div class="bar_item"></div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      pagetitle:["登录","注册"],
      temps:0,
    }
  },
  methods:{
    changeColor(event,index){
      // 改变temps的值，当前点击的控制的元素让他拥有changecolor样式
      this.temps=index
      
    }
  }
};
</script>

/* 选择拥有样式 */
.changecolor{
  color: coral;
}