标签:center language title 中英文 js 切换 i18n message h5
先说一下项目中所需要引入的文件
下载一个 vue-i18n.min.js 文件这个是需要引入到页面的
自己新建一个存放中英文的js文件,这里我的存放中英文的js文件是language.js
为了能让各位码友快速看到效果,直接上所有代码
css
html{background: #fff;} input{border: 1px solid rgb(54, 49, 49);} .change_language_box{width: 100%;border-bottom: 1px solid #eee;} .change_language{width: 96%;height: 40px;margin:auto;display: flex;align-items: center;justify-content: space-between;} .login_box{height: 200px;width: 500px; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .my_title{text-align: center;margin-top: 20px;} .ipt{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;} .ipt_ipt{width: 220px;height: 30px;border-radius: 3px;} .ipt_box_one{display: flex;align-items: center;justify-content: center; margin-top: 40px;} .ipt_box_two{display: flex;align-items: center;justify-content: center; margin-top: 10px;} .btn{display: block; width: 70%;height: 30px;line-height: 30px;text-align: center;margin: auto;background: rgb(5, 230, 117);color: #fff;border-radius: 15px;margin-top: 20px;}
html
<div id="app"> <div class="change_language_box"> <div class="change_language"> <p>{{$t("message.language")}}</p> <select v-model="selectClassEnd" @change="selectClass($event)"> <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> {{options.title}} </option> </select> </div> </div> <div class="login_box"> <div class="my_title">{{$t("message.title")}}</div> <div class="ipt"> <div class="ipt_box_one"> <span>{{$t("message.number")}}:</span> <input class="ipt_ipt" type="text" :placeholder="$t('message.enter_number')"> </div> <div class="ipt_box_two"> <span>{{$t("message.password")}}:</span> <input class="ipt_ipt" type="text" :placeholder="$t('message.input_password')"> </div> </div> <button class="btn">{{$t("message.login")}}</button> </div> </div>
js
<script src="./js/language.js"></script> //这里是自己新建存放中英文的js文件 <script src="./js/vue.min.js"></script> <script src="./js/vue-i18n.min.js"></script> //这里是需要你自己下载的i18n的国际化js文件 <script> const i18n = new VueI18n({ locale: 'cn', // set locale messages: messages , // set locale messages }); var vm = new Vue({ el: '#app', i18n, data: function () { return { data: this.$t('message.data'), selectClassData:[ //类别选择数据或者从后台获取数据 {id:1,title:"中文"}, {id:2,title:"en"}, ], selectClassEnd:"",//类别默认选择 } }, methods: { //类别选中 selectClass(event){ this.selectClassEnd = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称 if(this.selectClassEnd==1){ i18n.locale = 'cn' }else{ i18n.locale = 'en' } } }, created(){ this.selectClassEnd=this.selectClassData[0].id } }) </script>
新建language.js文件
language.js
const messages={ cn: { message: { "language":"语言", "title": "欢迎来到我的世界", "number": "账号", "password": "密码", "login":"登入", "enter_number":"请输入账号", "input_password":"请输入密码", } }, en: { message: { "language":"language", "title": "Welcome to my world", "number": "account number", "password": "Password", "login":"Login", "enter_number":"Please input a account number", "input_password":"Please input a password", } } }
将下载的vue-i18n.min.js和language.js引入到页面就可以了
这里要注意一下,input标签和div、p标签的中英文写法不太一样,input的placeholder是不需要双大括号
效果图
中文
英文
希望我的笔记能对大家有帮助,给我点个赞,谢谢
标签:center,language,title,中英文,js,切换,i18n,message,h5 来源: https://www.cnblogs.com/srqsl/p/15241579.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。