Vue.js项目实战之多语种网站的功能实现(租车)


Posted in Javascript onAugust 07, 2019

首先来看一下网站效果,想写这个项目的读者可以自行下载哦,地址:https://github.com/Stray-Kite/Car:

Vue.js项目实战之多语种网站的功能实现(租车)

Vue.js项目实战之多语种网站的功能实现(租车)

Vue.js项目实战之多语种网站的功能实现(租车)

Vue.js项目实战之多语种网站的功能实现(租车)

在这个项目中,我们主要是为了学习语种切换,也就是右上角的 中文/English 功能的实现。

首先看一下模拟的后台数据src/config/modules/lang.js 文件中:

关键代码:

export default {
 name: 'Homepage',
 components: {
  ScrollNumber
 },
 data () {
  return {
   lang: 'chinese',
   pageIndex: 0,
   stepIndex: 0
  }
 },
 ......其余代码 44  methods: {
  addClass (el, _class) {177   //切换语言
  toggleLang (lang) {
   this.lang = lang
   // this.animatePage()
  }
 },
 //以下几个computed是获取config文件夹里的数据
 computed: {
  langs () {
   return config.langs[this.lang] //主要靠这里切换,这个切换的本质其实就是使用了另一套英文的数据(换了一套后台数据)
  },
  ......其余代码198  }
}

总结

以上所述是小编给大家介绍的Vue.js项目实战之多语种网站的功能实现(租车),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 #Javascript
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python实现list由于numpy array的转换
2018/04/04 Python
对python:print打印时加u的含义详解
2018/12/15 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python中对数据进行各种排序的方法
2019/07/02 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Django框架安装方法图文详解
2019/11/04 Python
pytorch构建多模型实例
2020/01/15 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
五四青年节活动总结
2015/02/10 职场文书
十月围城观后感
2015/06/08 职场文书
五年级作文之学校的四季
2019/12/05 职场文书