Vue.js 单击Vue js时显示和隐藏按钮文本

我想在Vue js中单击时显示和隐藏按钮。很好用。当我单击“显示”按钮时，它将展开，按钮名称将更改为“隐藏”。然后再次单击隐藏按钮，它将显示不带图像的“显示”按钮。 单击之前：

单击后（我需要将按钮文本更改为隐藏或其他名称）：

单击按钮以显示或隐藏
单击以显示图像
var app=新的Vue({
el:“#应用程序”，
数据：{
伊希登：是的
}
});

我想，你只是想切换文本？您可以使用

进行此操作

v-if

有条件地显示元素及其内容<代码>是一个不会在最终HTML中呈现的元素，只会呈现其内容

<div id="app">

  <h1>Click the Button to Show or Hide</h1>
  <button class="btn-primary" v-on:click="isHidden = !isHidden">
    <template v-if="isHidden">Click to Show the Images</template>
    <template v-else>Click to Hide the Images</template>
  </button>

  <img src="images/7.jpg" v-if="!isHidden">
  <img src="images/8.jpg" v-if="!isHidden">
  <img src="images/9.jpg" v-if="!isHidden">

</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    isHidden: true
  }
});
</script>

单击按钮以显示或隐藏
单击以显示图像
单击以隐藏图像
var app=新的Vue({
el:“#应用程序”，
数据：{
伊希登：是的
}
});

如果只有一个简单条件，也可以使用三元运算符。三元运算符不应与嵌套条件一起使用

<button class="btn-primary" v-on:click="isHidden = !isHidden">
  {{ isHidden ? 'Click to Show the Images' : 'Click to Hide the Images' }}
</button>

{{ishiden？'单击以显示图像'：'单击以隐藏图像'}

我认为这应该会有所帮助

var-app=新的Vue({
el:“#应用程序”，
数据：{
伊希登：是的
}
});

单击按钮以显示或隐藏
{{ishiden？'单击以显示图像'：'单击以隐藏图像'}

<button class="btn-primary" v-on:click="isHidden = !isHidden">
  {{ isHidden ? 'Click to Show the Images' : 'Click to Hide the Images' }}
</button>