标题文字设置，根据不同的操作类型

一、描述

        在开发后台管理系统中，较常用的写法，简洁易懂。场景是，在点击新增或者编辑的时候，往往都是用的同一个表单，但是标题会根据是点击‘新增’还是‘编辑’操作来对应显示，当点击编辑时，表单的标题是‘编辑’，点击新增时，标题是‘新增’。

二、写法

简单的if判断逻辑就不介绍了，当然还有其他匹配的方式。

举个例子：

<template>
  <div>
    <h1 :title="{ new: '新建产品', modify: '修改产品信息' }[operation]"></h1>
    <button @click="operation = 'new'">新建产品</button>
    <button @click="operation = 'modify'">修改产品信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      operation: 'new', // 默认状态为新建
    };
  },
};
</script>

在这个例子中，我们要重点看的是这一句：

 :title="{ new: '新建产品', modify: '修改产品信息' }[operation]"

        这是动态绑定标题，当后面的operation是new的时候，显示‘新建产品’，当operation是modify的时候显示‘修改产品信息’。根据不同的操作状态显示对应的标题。这个写法就比较简洁，没有额外的参数。