Vue项目中如何替换性别为代码并保持输出单行无换行？

在Vue项目开发表单时，需要将选中的性别选项（"Мужчина"对应输出"М"，"Женшина"对应输出"Ж"）转换为对应代码后输出。最初直接绑定sex变量时输出是单行，但用v-if/v-else结合<div>实现转换后，输出结果出现换行，需要实现性别代码替换同时保持内容在同一行。

原始代码（直接绑定sex的版本） #

<template>
  <div>
    Фамилия: <input type="text" v-model="surname"><br>
    Имя: <input type="text" v-model="name"><br>
    Дата рождение: <input type="text" v-model="birthday"><br>

    <input type="radio" value="Мужчина" v-model="sex">
    <label>Мужчина</label>
    <br>
    <input type="radio" value="Женшина" v-model="sex">
    <label>Женшина</label><br>

    Гражданства: <input type="text" v-model="citizenship"><br>
    Серия пасспорт: <input type="text" v-model="passportSeries"><br>
    Срок пасспорт: <input type="text" v-model="passportExpirationDate"><br><br>

    -{{ surname }} {{ name }} {{ birthday }}+{{ sex }}/{{ citizenship }}/нп{{ passportSeries }}/{{ passportExpirationDate }}
  </div>
</template>

<script>
export default {
  data (){
    return {
      surname: '',
      name: '',
      birthday: '',
      sex: '',
      citizenship: '',
      passportSeries: '',
      passportExpirationDate: '',
    }
  }
}
</script>

修改后出现换行的代码（用<div>的版本） #

<template>
  <div>
    Фамилия: <input type="text" v-model="surname"><br>
    Имя: <input type="text" v-model="name"><br>
    Дата рождение: <input type="text" v-model="birthday"><br>

    <input type="radio" value="Мужчина" v-model="sex" >
    <label>Мужчина</label>
    <br>
    <input type="radio" value="Женшина" v-model="sex">
    <label>Женшина</label><br>

    Гражданства: <input type="text" v-model="citizenship"><br>
    Серия пасспорт: <input type="text" v-model="passportSeries"><br>
    Срок пасспорт: <input type="text" v-model="passportExpirationDate"><br><br>

    -{{ surname }} {{ name }} {{ birthday }}+<div v-if="sex == 'Мужчина'">М</div><div v-else-if="sex == 'Женшина'">Ж</div>/{{ citizenship }}/нп{{ passportSeries }}/{{ passportExpirationDate }}
  </div>
</template>

解决方法 #

方案1：文本插值+三元表达式（最简洁） #

直接在插值语法里用三元表达式完成性别转换，无需额外DOM元素，自然保持单行：

<template>
  <div>
    <!-- 表单部分不变 -->
    Фамилия: <input type="text" v-model="surname"><br>
    Имя: <input type="text" v-model="name"><br>
    Дата рождение: <input type="text" v-model="birthday"><br>

    <input type="radio" value="Мужчина" v-model="sex">
    <label>Мужчина</label>
    <br>
    <input type="radio" value="Женшина" v-model="sex">
    <label>Женшина</label><br>

    Гражданства: <input type="text" v-model="citizenship"><br>
    Серия пасспорт: <input type="text" v-model="passportSeries"><br>
    Срок пасспорт: <input type="text" v-model="passportExpirationDate"><br><br>

    <!-- 用三元表达式转换性别 -->
    -{{ surname }} {{ name }} {{ birthday }}+{{ sex === 'Мужчина' ? 'М' : sex === 'Женшина' ? 'Ж' : '' }}/{{ citizenship }}/нп{{ passportSeries }}/{{ passportExpirationDate }}
  </div>
</template>

方案2：用行内元素<span>替换<div> #

<div>是块级元素，默认独占一行，换成行内元素<span>即可解决换行问题：

<template>
  <div>
    <!-- 表单部分不变 -->
    Фамилия: <input type="text" v-model="surname"><br>
    Имя: <input type="text" v-model="name"><br>
    Дата рождение: <input type="text" v-model="birthday"><br>

    <input type="radio" value="Мужчина" v-model="sex">
    <label>Мужчина</label>
    <br>
    <input type="radio" value="Женшина" v-model="sex">
    <label>Женшина</label><br>

    Гражданства: <input type="text" v-model="citizenship"><br>
    Серия пасспорт: <input type="text" v-model="passportSeries"><br>
    Срок пасспорт: <input type="text" v-model="passportExpirationDate"><br><br>

    <!-- 把div换成span -->
    -{{ surname }} {{ name }} {{ birthday }}+<span v-if="sex == 'Мужчина'">М</span><span v-else-if="sex == 'Женшина'">Ж</span>/{{ citizenship }}/нп{{ passportSeries }}/{{ passportExpirationDate }}
  </div>
</template>

方案3：使用计算属性（更易维护） #

如果转换逻辑复杂或需要复用，推荐用计算属性抽离转换逻辑，模板更简洁：

<template>
  <div>
    <!-- 表单部分不变 -->
    Фамилия: <input type="text" v-model="surname"><br>
    Имя: <input type="text" v-model="name"><br>
    Дата рождение: <input type="text" v-model="birthday"><br>

    <input type="radio" value="Мужчина" v-model="sex">
    <label>Мужчина</label>
    <br>
    <input type="radio" value="Женшина" v-model="sex">
    <label>Женшина</label><br>

    Гражданства: <input type="text" v-model="citizenship"><br>
    Серия пасспорт: <input type="text" v-model="passportSeries"><br>
    Срок пасспорт: <input type="text" v-model="passportExpirationDate"><br><br>

    <!-- 直接使用计算属性 -->
    -{{ surname }} {{ name }} {{ birthday }}+{{ sexCode }}/{{ citizenship }}/нп{{ passportSeries }}/{{ passportExpirationDate }}
  </div>
</template>

<script>
export default {
  data (){
    return {
      surname: '',
      name: '',
      birthday: '',
      sex: '',
      citizenship: '',
      passportSeries: '',
      passportExpirationDate: '',
    }
  },
  computed: {
    sexCode() {
      switch(this.sex) {
        case 'Мужчина':
          return 'М';
        case 'Женшина':
          return 'Ж';
        default:
          return '';
      }
    }
  }
}
</script>

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