在vue页面使用i18n

主要有两种方法,第一种是在template中直接渲染,另一种在data中使用。

  1. template中
<span>{{$t('success.return')}}</span>

// i18n文件
success:{
			return: '返回列表'
		},
  1. data中
<!-- 导航 -->
<div class="successNav">
	<span v-for="(item,index) in navList" :key="index" :class="nav===index?'successNavColor':''" @click="toChangeNav(index)">{{item.title}}</span>
</div>
navList: [{
			id: 1,
			title: this.$t('success.menu1')
	},	{
			id: 2,
			title: this.$t('success.menu2')
	},{
			id: 3,
			title: this.$t('success.menu3')
	}],
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,使用i18n实现一键翻译的功能按钮的步骤如下: 1. 安装`vue-i18n`插件 ``` npm install vue-i18n ``` 2. 创建i18n实例 在main.js文件中创建i18n实例,并设置默认语言和语言包: ```javascript import { createApp } from 'vue' import App from './App.vue' import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'zh-CN', // 默认语言 messages: { 'zh-CN': require('./locales/zh-CN.json'), // 中文语言包 'en-US': require('./locales/en-US.json') // 英文语言包 } }) const app = createApp(App) app.use(i18n) app.mount('#app') ``` 3. 添加翻译按钮 在需要添加翻译按钮的组件中,添加一个按钮,并在点击事件中调用i18n实例的`setLocaleMessage`方法来切换语言: ```html <template> <div> <button @click="translate">Translate</button> <p>{{ $t('hello') }}</p> </div> </template> <script> export default { methods: { translate() { // 切换语言 this.$i18n.setLocaleMessage('zh-CN', require('../locales/en-US.json')) } } } </script> ``` 在上面的代码中,点击按钮后会将语言切换为英文。 4. 创建语言包 在项目根目录下创建一个`locales`文件夹,并在其中创建一个`zh-CN.json`文件和一个`en-US.json`文件,用于存放中文和英文的语言包。例如: ```json // zh-CN.json { "hello": "你好,世界!" } ``` ```json // en-US.json { "hello": "Hello, world!" } ``` 现在,当我们点击翻译按钮后,页面上的"你好,世界!"会自动切换为"Hello, world!"。 以上就是使用i18n实现一键翻译的功能按钮的全部步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值