uniapp怎么实现菜单点击后改变样式

uniapp怎么实现菜单点击后改变样式

1. 点击事件绑定

在uniapp中，要实现菜单点击后改变样式，首先需要给菜单绑定点击事件。可以使用<button>标签或者<a>标签来实现。

<template>
  <button @click="changeStyle">菜单按钮</button>
</template>
<script>
  export default {
    methods: {
      changeStyle() {
        // 点击事件触发的函数
      }
    }
  }
</script>

2. 样式变化

点击事件绑定完成后，接下来需要改变菜单的样式。可以采用以下两种方式来实现：

2.1. 样式绑定

使用v-bind指令将样式绑定到菜单上。并在点击事件中改变绑定的属性值。

<template>
  <button v-bind:style="menuStyle" @click="changeStyle">菜单按钮</button>
</template>
<script>
  export default {
    data() {
      return {
        menuStyle: {
          backgroundColor: 'red'
        }
      }
    },
    methods: {
      changeStyle() {
        this.menuStyle.backgroundColor = 'blue';
      }
    }
  }
</script>

以上代码中给button标签添加了style属性，其值为对象类型的menuStyle变量。在数据中定义好要绑定的样式，然后在点击事件中修改该变量的属性值即可实现菜单的样式改变。

2.2. class绑定

使用v-bind:class指令将class绑定到菜单上。并在点击事件中修改绑定的class名称。

<template>
  <button class="menu-btn" v-bind:class="{'menu-blue': isBlue}" @click="changeStyle">菜单按钮</button>
</template>
<style>
  .menu-btn {
    background-color: red;
  }
  .menu-blue {
    background-color: blue;
  }
</style>
<script>
  export default {
    data() {
      return {
        isBlue: false
      }
    },
    methods: {
      changeStyle() {
        this.isBlue = true;
      }
    }
  }
</script>

以上代码中给button添加menu-btn类，并在v-bind:class中绑定menu-blue类，初始时isBlue为false，所以菜单为红色。点击后将isBlue值改为true，即可将菜单变蓝。

3. 总结

以上就是在uniapp中实现菜单点击后改变样式的两种方法，可以根据实际需求选择合适的方式。