问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

单击时如何更改特定（此）按钮类。使用 Vue.js 2.0

社区维基
1
新手上路，请多包涵

单击任何按钮时，它们都将变为活动状态。所以我想要的只是被点击的那个应该被改变。

 var vm = new Vue({
	el: '#toolBtns',
	data: {
		isActive: false
	},
	computed: {
		activeClass: function () {
			return {
				active: this.isActive
			};
		}
	}
});

 <div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>

原文由 radeveloper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译classbindvuejs2vue.js
阅读 901
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可能需要一个变量来查找当前选择的按钮。您可以使用该变量动态绑定正确的类： with : :class="{active: activeBtn === 'btn1' }" 。

这种方法的好处是您只有一个变量而不是数组来保存当前选择的按钮，因此您不必在每次选择按钮时都对数组进行迭代。

 var vm = new Vue({
	 el: '#toolBtns',
	 data: {
 		activeBtn:''
	 }
 });

 .active{
  background-color:red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="toolBtns">
<div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>
  <button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button>
  <button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div>
</div>

请参阅 此处 的工作小提琴。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

您不需要设置“isActive: false”，也不需要将 isActive 绑定到每个项目。你可以这样做： 1、声明一个数组，叫做’candidates’，那么每个被点击的项目都会被推入candidates。 2，声明一个名为“contains()”的函数，它检查一个项目是否在候选数组中。 3、为每一项绑定contains()。 4、在CSS中，给’clicked’一些样式。

代码：

 <body>
    <div id="toolBtns">
        <button v-for="item in buttons" v-on:click="provide(item)" v-bind:class="{clicked: contains(candidates, item)}" type="button">{{ item.name }}
        </button>
    </div>
</body>

javascript代码：

 var toolBtns = new Vue({
el: '#toolBtns',
data:
{
    buttons: [
        {name: 'Btn1'},
        {name: 'Btn2'},
        {name: 'Btn3'},
    ],
    candidates: [],
},
methods:
{
    provide: function(item)
    {
        if(this.candidates.indexOf(item) == -1)
        {
            this.candidates.push(item);
        }
        else
        {
             this.candidates.splice(this.candidates.indexOf(item), 1);
        }
    },
    contains: function(arr, item)
    {
        return arr.indexOf(item) != -1;
    },
}
});

CSS代码

.clicked{
    background-color: red;
}

这是 jsfiddle 示例 https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/

原文由 Xie Jun 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题