定义i18n变量：

assets\locales\zh-CN\base.json

{
  "cups-count": "这里有{count}个杯子"
}

components\cup\index.vue：

一、直接插入count变量：

<p>{{$t('cups-count', {count:6})}}</p>

直接使用变量，页面上：

<template>
  <div class="page-section">
    <p class="page-section-title">杯子详情</p>
    <!-- 插入文字 -->
    <div class="f12">
        <p>{{$t('cups-count', {count:6})}}</p>
    </div>
  </div>
</template>

二、以HTML形式插入count变量：

p标签中，要单独给count变量的值设置颜色，所以要在p标签中插入span标签，给span标签设置类名：

<i18n path="cups-count" :tag="false">
  <template slot="count">
    <span class='theme-color'>6</span>
  </template>
</i18n>

count变量以HTML形式插入，页面上：

<template>
  <div class="page-section">
    <p class="page-section-title">杯子详情</p>
    <!-- 插入HTML -->
    <div class="f12">
        <i18n path="cups-count" :tag="false">
		  <template slot="count">
		    <span class='theme-color'>6</span>
		  </template>
		</i18n>
    </div>
  </div>
</template>