javascript - 如果 Vue 中的语句单击以更改要运行的功能？

Question

如何在 v-bind、v-on 或 @click 中使用 if 语句来处理要运行的函数？

我现在所拥有的唯一可行的是这个(if 语句是简写的 javascript):

        <li v-for="entry in entries.entries"><button type="button" @click="entry.entries?openSub($event):'entry.action'">{{entry.title}}</button>

所以基本上，如果按钮列表项中有子条目，按钮应该触发将子菜单事件类添加到列表项的函数，如果按钮所在的列表项没有任何子条目，它应该运行分配给按钮的任何功能。

我说它有点工作是因为它确实正确运行了 openSub($event) 部分，但它既不运行也不添加在没有条目时应该运行的函数。

Answer 1

问题是您没有执行函数。

new Vue({
  el: '#app',
  data: {
  	bool: true
  },
  methods: {
  	one() {
    	console.log('one');
      this.bool = !this.bool;
    },
    two() {
    	console.log('two');
      this.bool = !this.bool;
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="bool ? one() : two()">Click</button>
</div>

所以，应该有entries.action()在您的代码中。

<li v-for="entry in entries.entries"><button type="button" @click="entry.entries ? openSub($event) : entry.action()">{{entry.title}}</button>