我正在学习Vue并在计算属性中使用箭头函数时遇到问题.
我的原始代码工作正常(请参阅下面的代码段).
new Vue({
el: '#app',
data: {
turnRed: false,
turnGreen: false,
turnBlue: false
},
computed:{
switchRed: function () {
return {red: this.turnRed}
},
switchGreen: function () {
return {green: this.turnGreen}
},
switchBlue: function () {
return {blue: this.turnBlue}
}
}
});.demo{
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
<div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
<div class="demo" @click="turnGreen = …我很好奇这两个数据函数,这两者之间有什么区别.
我经常看到的是
data () {
return {
obj
}
}
和我通常使用的ES6"胖箭"
data:()=>({
obj
})