无涯教程网

Vue.js中的Inline invert boolean @click

发布于03月24日

对于一个简单的演示，我想反转我在Vue的数据属性中定义的布尔值.js实例.

我try 的是:

<button @click="!spanVisible" type="button">Toggle</button>

和

<button @click="(!spanVisible)" type="button">Toggle</button>

我想避免写一个单独的方法，或者在我的v-on:click="":spanVisible ? !spanVisible : !spanVisible中有类似的东西，因为它只是多余的.

So now my questions mostly are: Why doesn't the direct inverting work? What other possibility do I have to keep it short 和 simple?

edit:

我现在发现的最短可能的变化是使用spanVisible = !spanVisible，但不确定这是否是可用的最简洁的版本.

SOLUTION:

我找到的最佳解决方案是@Sombriks在 comments 中提出的:

推荐答案

我认为没有methods美元也是可能的

添加单击事件以反转布尔变量的值.这样地:

@click="showExtra = !showExtra"

在脚本数据中:

<script>
  export default {
  return {
    data() {
       showExtra: false
    }
 }
}
</script>

Vue.js相关问答推荐

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

设置Vite Vue 3需要多个应用程序输出目录

vue3 ssr 不返回纯 html

Vuex Mutations 和 Airbnb eslint

Vue-tables-2(vuex)react性不起作用

如何使用 vue 或 javascript 向服务器发送密码？

将props传递给设置时的VueJS 3组合API和TypeScript类型问题：类型上不存在属性 user用户

判断 vue-router.beforeEach 不限制对路由的访问

Vue 两种方式的 prop 绑定

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

Vue 3 如何获取有关 $children 的信息

错误：您可能需要额外的加载器来处理这些加载器的结果.

如何从 .vue 文件中导出多个对象

在 v-for 循环中使用 v-model

v-for 如何在继续之前判断未定义的列表

带有后退按钮的 Vue.js 路由

组件已注册但未使用 vue/no-unused-components

使用 Vuetify 的可滚动数据表

用于 nuxt.js 构建的自定义 index.html

Vuex 模块Mutations

实用课程推荐

相关教程推荐