我正在尝试从jQuery切换到Vue.js,对此我有些犹豫。我在页面上有3个按钮。当我单击一个按钮时,我希望所有其他按钮将背景色更改为绿色,并将被单击的按钮更改为黑色。
使用jQuery只是两行代码,但是我不知道如何使用Vue.js完成它。 Vue.js似乎也没有this关键字。
此外,在这一点上,我想仅应用原始的CSS背景颜色属性,而不是应用类。
这是我的jQuery代码-非常简单
<div class="main-content-area">
<div class="btn">Click me!</div>
<div class="btn">Click me!</div>
<div class="btn">Click me!</div>
</div>
const Example = new Vue({
el: '.main-content-area',
methods: {
addEventListeners() {
$(document).ready(function() {
$(".btn").click(function() {
$(".btn").css("background-color", "green"); // Make all buttons green
$(this).css("background-color", "black"); // Make the clicked button black
});
});
}
},
mounted: function() {
this.addEventListeners();
}
})
有了Vue.js,我到此为止...
<div class="main-content-area">
<div class="btn" @click="changeColor">Click me!</div>
<div class="btn" @click="changeColor">Click me!</div>
<div class="btn" @click="changeColor">Click me!</div>
</div>
const Example = new Vue({
el: '.main-content-area',
methods: {
changeColor() {
// Change color to green for all .btn elements
// and change color for clicked .btn to black
}
})
答案 0 :(得分:0)
使用按钮组件:
HTML:
<div class="main-content-area">
<my-custom-button component-type="my-custom-button" ></my-custom-button>
<my-custom-button component-type="my-custom-button"></my-custom-button>
<my-custom-button component-type="my-custom-button"></my-custom-button>
</div>
JavaScript:
Vue.component("my-custom-button",{
template : '<div class="btn" :style="buttonStyles" @click="activeThisButton" >Click me!</div>',
data(){
return {
isActive : false,
}
},
computed : {
buttonStyles(){
return {
backgroundColor : this.isActive ? 'green' : '',
}
}
},
methods : {
activeThisButton(){
// call inactiveAllButtons on parent to deselect all buttons
this.$root.inactiveAllButtons();
// active current button
this.isActive = true;
}
}
})
const Example = new Vue
({
el: '.main-content-area',
methods : {
// filter children and find buttons ( by component-type property )
// and inactive all .
inactiveAllButtons(){
var buttons = this.$children.filter(function(child) {
return child.$attrs['component-type'] === 'my-custom-button';
});
for(var i = 0 ; i < buttons.length ; i++ ){
buttons[i].isActive = false;
}
}
}
});
答案 1 :(得分:0)
这是一种更好的方法,无需使用不安全的$root
和$children
。
<template>
<div class="hello">
<button class="btn" @click="activeButton = 0" v-bind:style="{'background-color':buttonColor[0]}">Click me!</button>
<button class="btn" @click="activeButton = 1" v-bind:style="{'background-color':buttonColor[1]}">Click me!</button>
<button class="btn" @click="activeButton = 2" v-bind:style="{'background-color':buttonColor[2]}">Click me!</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
activeButton: 0
};
},
computed: {
buttonColor: function() {
let result = [];
for (var i = 0; i< 3; i++){
if (this.activeButton == i){
result.push('black');
} else {
result.push('green');
}
}
return result;
}
}
};
</script>
演示:https://codesandbox.io/s/8kz9y0rjj9
您也可以按照{Zoha的建议,将button
包装在单独的组件中,但是鉴于您没有要求,我没有这样做。这样可以在组件中隐藏buttonColor
实现。
还请注意,使用类是更可取且更简洁的方法:无需难看的buttonColor
计算函数。
<template>
<div class="hello">
<button class="btn" @click="activeButton = 0" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 0}">Click me!</button>
<button class="btn" @click="activeButton = 1" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 1}">Click me!</button>
<button class="btn" @click="activeButton = 2" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 2}">Click me!</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
activeButton: 0
};
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.greenBtn {
background-color: green
}
.blackBtn {
background-color: black
}
</style>