Vue.js 如何实现多条件判断的内联点击事件且无需抽离为方法

实现代码 #

你需要的内联多层三元写法如下，同时修正了原参考代码中直接读取数组text属性的错误：

遍历渲染所有todo对应按钮的写法

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button 
    v-for="(todo, idx) in todos" 
    :key="idx"
    @click="todo.text === 'oil' ? click(todo) : todo.text === 'food' ? click2(todo) : click3(todo)"
  >
    点击{{ todo.text }}
  </button>
</div>

单按钮指定单个todo测试的写法

如果不需要遍历，只需指定具体数组下标读取对应todo即可：

<button @click="todos[2].text === 'oil' ? click(todos[2]) : todos[2].text === 'food' ? click2(todos[2]) : click3(todos[2])">
  点击测试
</button>

逻辑说明 #

• 第一层判断对应text属性值为oil时触发click方法
• 第一层不满足则进入第二层判断，值为food时触发click2方法
• 所有不符合前两个条件的场景统一触发兜底的click3方法
• 完全保留内联写法，无需额外封装实例方法

内容的提问来源于stack exchange，提问作者Vzupo