8-vue语法 小案例

绑定、事件等知识的综合运用

$\color{lightgreen}{实现效果：点击导航栏，使点击的模块高亮变色显示，其他栏不变}$

实现原理： 1.循环渲染出4个导航栏选项 2.先写好两个样式，一个默认样式，一个是选中后显示的样式 3.给所有项绑定初始样式 4.绑定点击事件，一旦触发点击事件，就将触发点击事件的项改变颜色显示

@click="clickNav(index)点击事件带括号表示传值，传的值就是index，选中项的索引，将他传给点击事件的方法接收，就可以获取到是哪一个盒子被点击了 在下面点击事件中接收这个参数clickNav(e){}

<template>
  <view>
    <view class="nav">
      <view class="item" v-for="(item, index) in navArr" :key="item.id" @click="clickNav(index)">{{item.title}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navArr: [
          {id: 1,title: "首页"},
          {id: 2,title: "介绍"},
          {id: 3,title: "教程"},
          {id: 4,title: "组件"},
        ]
      }
    },
    methods: {
      clickNav(e){
        console.log(e);
      }
  }
  }
</script>

<style lang="scss">
.nav {
  // 使用弹性盒模型布局
  display: flex;
  // 两端对齐,中间间距相等
  justify-content: space-around;
  // 弹性盒子元素在该行的侧轴（纵轴）上居中放置。
  // 如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。
  align-items: center;
  .item {
    // 平局分布 一个item占一份
    flex: 1;
    // 盒子高度
    line-height: 90rpx;
    background: #ccc;
    // 文字竖向居中显示
    text-align: center;
    &.active{
      background: #1AA034;
      color: #fff;
    }
  }
  }
</style>

点击首页和介绍，确实在微信开发者工具中拿到了索引值，这样就知道点的是哪一个了

使用三元表达式判断，给选中的项绑定active样式， :class="navIndex==index ?'active' : '' 如果选中项index的值和data中定义的属性navIndex相等，则表示这一项被选中，就给他绑定active样式，如果不相等，就不变（ 显示原本的灰色）

接下来就是要在下面methods中去将选中的项赋值给默认值navIndex

methods: {
      clickNav(e){
        this.navIndex = e
      }
    }

全部代码：

<template>
  <view>
    <view class="nav">
      <view class="item" :class="navIndex==index ?'active' : ''" v-for="(item, index) in navArr" :key="item.id" @click="clickNav(index)">{{item.title}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navArr: [
          {id: 1,title: "首页"},
          {id: 2,title: "介绍"},
          {id: 3,title: "教程"},
          {id: 4,title: "组件"},
        ],
        // 默认选中项为第一项
        navIndex:0
      }
    },
    methods: {
      clickNav(e){
        this.navIndex = e
      }
    }
  }
</script>

<style lang="scss">
.nav {
  // 使用弹性盒模型布局
  display: flex;
  // 两端对齐,中间间距相等
  justify-content: space-around;
  // 弹性盒子元素在该行的侧轴（纵轴）上居中放置。
  // 如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。
  align-items: center;
  .item {
    // 平局分布 一个item占一份
    flex: 1;
    // 盒子高度
    line-height: 90rpx;
    background: #ccc;
    // 文字竖向居中显示
    text-align: center;
    &.active{
      background: #1AA034;
      color: #fff;
    }
  }
  }
</style>