好吧，请注意，这是一个非常新手的问题，因为我只是开始使用Vue.js。
所以，我有一个标签和一个按钮。如果标签不可见，则按钮应显示“显示标签”，然后单击...显示标签。当标签是可见时，按钮应显示“隐藏标签”，并在单击时将其隐藏。
此（具有计算的属性）显示/隐藏标签，但不更改按钮标题：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/[email protected]/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>
[这个（仅带有on：click绑定）不执行任何操作：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/[email protected]/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报告没有任何问题...
UPDATE：
[在第二种情况下，当打印出labelVisible和toggleMessage的值时，它们的变化确实很好。只是更改未反映在组件中。
好，所以，我要给自己发布答案。
@ AlexBrohshtut发现的是正确的。胖箭头功能是个问题。
但是，最重要的部分是我没有将函数放在methods中（我也将它们放在data部分中）。 Pff ...
所以，this起作用：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/[email protected]/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>