如何确保 Vue 中使用 <el-input> 元素的 placeholder 属性能够正确应用 {{ $t('message.username') }} 进行国际化展示？

在 Vue.js 中使用 Element UI 的 `<el-input>` 元素，并想通过国际化的 `v-bind` 指令动态绑定 placeholder 属性，你需要结合 `vue-i18n` 或者 Element UI 自带的国际化支持来完成。以下是步骤：

1. 首先，确保你已经安装了相应的插件。如果是 `vue-i18n`，可以在项目根目录运行：

   npm install vue-i18n

2. 如果还没有配置 `vue-i18n`，创建一个 `i18n.js` 文件，并初始化国际化配置：

   import VueI18n from 'vue-i18n'

   export default new VueI18n({
     messages: {
       en: {
         message: {
           username: 'Username'
         }
       },
       zh: {
         message: {
           username: '用户名'
         }
       }
     }
   })

然后，在你的 main.js 中引入并使用这个插件。

3. 在需要显示 placeholder 的组件模板中，使用 `v-bind` 绑定 `placeholder` 属性，同时使用 `$t()` 函数来获取当前语言下的字符串：

   <template>
     <el-input v-model="username" :placeholder="$t('message.username')"></el-input>
   </template>

   <script>
   export default {
     data() {
       return {
         username: ''
       };
     },
     //...
   }
   </script>

4. 当你的 Vue 应用实例化时，Vue 将自动根据用户的浏览器语言设置加载对应的翻译。如果你希望在页面加载时根据用户偏好选择语言，可以使用 `this.$i18n.locale` 设置语言。

现在，当你切换语言时，`<el-input>` 的 placeholder 将会相应地显示为英文或中文的 "Username"。