好的，请注意，这是一个非常新手的问题，因为我才刚刚开始使用Vue.js.
所以，我有一个标签和一个按钮。如果标签不可见，则按钮应显示"显示标签"，单击时。。。显示标签。当标签可见时，按钮应显示"隐藏标签"，单击时将其隐藏。
这(具有计算属性(显示/隐藏标签，但不会更改按钮标题：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
This is another thing: <b>{{thing}}</b><br>
<span :title="title" @click="doSomething">NO TITLE</span>
<ul v-for="item in items">
<li>{{item}}</li>
</ul>
<button @click="labelVisible=!labelVisible">{{toggleMessage}}</button>
<label v-if="labelVisible">This is my label</label>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
thing: 'thing',
title: "This is the title",
doSomething: ()=>{
alert("did something")
},
items: ["one", "two", "three"],
labelVisible: true
},
computed: {
toggleMessage: ()=>{
if (this.labelVisible) {
return "Hide Label";
}
else {
return "Show Label";
}
}
}
});
</script>
</html>
这个(只有点击绑定(没有任何作用：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
This is another thing: <b>{{thing}}</b><br>
<span :title="title" @click="doSomething">NO TITLE</span>
<ul v-for="item in items">
<li>{{item}}</li>
</ul>
<button @click="buttonClicked">{{toggleMessage}}</button>
<label v-if="labelVisible">This is my label</label>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
thing: 'thing',
title: "This is the title",
doSomething: ()=>{
alert("did something")
},
items: ["one", "two", "three"],
labelVisible: true,
toggleMessage: "Hide Label",
buttonClicked: ()=> {
this.labelVisible = !this.labelVisible;
if (this.labelVisible) {
this.toggleMessage = "Hide Label";
}
else {
this.toggleMessage = "Show Label";
}
}
}
});
</script>
</html>
最好是，我想让他们两个都工作。但我仍然看不出我做错了什么。Vue DevTools报告没有任何问题。。。
更新：
在第二种情况下，当打印出labelVisible和toggleMessage的值时，它们确实变化很好。只是更改没有反映在组件中。
好的，所以，我把答案发给自己。
AlexBrohshtut发现的是对的。胖箭功能是个问题。
然而，最重要的是，我没有把我的函数放在methods中(我也在data部分中有它们(。Pff。。。
因此，这个有效：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
This is another thing: <b>{{thing}}</b><br>
<span :title="title" @click="doSomething">NO TITLE</span>
<ul v-for="item in items">
<li>{{item}}</li>
</ul>
<button @click="buttonClicked">{{toggleMessage}}</button>
<label v-if="labelVisible">This is my label</label>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
thing: 'thing',
title: "This is the title",
doSomething: ()=>{
alert("did something")
},
items: ["one", "two", "three"],
labelVisible: true,
toggleMessage: "Hide Label",
},
methods: {
buttonClicked: function() {
console.log("button");
this.labelVisible = !this.labelVisible;
console.log(this.labelVisible);
if (this.labelVisible) {
this.toggleMessage = "Hide Label";
}
else {
this.toggleMessage = "Show Label";
}
console.log(this.toggleMessage);
}
}
});
</script>
</html>