今天学习的是一个简单的逻辑事件,点击按钮样式发生改变

想想一下,当我们有一排点击按钮的时候,我们想要当我们点击某一个的时候相应的按钮会作出样式的改变,是不是很酷,很简单的,接下来就带着大伙展示一下

首先肯定要有我们的button按钮对吧如有不懂的稍后会加以解释

<buttonv-for="index in 3":key="index"@click="select(index)":class="[activeIndex === index ? 'active' : '']">{{index }}</button>

自定义一个方法,并传入一个值,这个值就是我们对应点击的时候对应的按钮index值,这不难懂把,点击按钮1就按钮1变化,点击按钮2就按钮2变化,所以我们就是要传入对应按钮的index值

methods: {select(index) {// 介绍一个参数,这个参数就是对应按钮的index值this.activeIndex = index;},},

接下来就是样式的改变了css代码

<style>.active{padding: 10px;background: yellow;}</style>

疑惑解答

首先就是我们如果判断按钮样式的改变, 没错就是index:class="[activeIndex === index ? 'active' : '']",有的同学看不懂这一段,这里就是动态绑定一个class,如果activeIndex===index为true的话就是active,如果为false的话就为空,一定一定记得要在data里先定义activeIndex!!

完整代码

<template><!-- <div class="static" :class="{ active: isActive, disactive: not }">hizz</div> --><div class="classObject"><buttonv-for="index in 3":key="index"@click="select(index)":class="[activeIndex === index ? 'active' : '']">{{index }}</button></div></template><script>export default {data() {return {activeIndex: null,};},computed: {classObject: function () {return {active: this.isActive && !this.error,"text-danger": this.error,};},},methods: {select(index) {this.activeIndex = index;},},};</script><style>.active{padding: 10px;background: yellow;}</style>