【Vue】Vue中分支控制语句优化

假设有如下list，我们使用 v-for 将其渲染到页面，并且希望在点击不同项时会执行不同的事件。

list:[
{
   title:'点击执行事件A'},
{
   title:'点击执行事件B'},
{
   title:'点击执行事件C'}
]

要实现上述需求，最常见的做法就是为元素绑定 click 事件 handleClick，然后将 title 属性作为参数传入 handleClick 中，接着使用 if-else 来判断要执行的是哪个事件。

<ul>
    <li v-for="item in list" 
        :key="item.title"
        @click="handleClick(item.title)">
    {
  { item.title }}
    </li>
</ul>

handleClick(title){
   
    if(title === '点击执行事件A'