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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php生出随机字符串
2017/07/06 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python制作爬虫抓取美女图
2016/01/20 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python如何解除一个装饰器
2020/08/07 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
医药专业推荐信
2013/11/15 职场文书
黄河的主人教学反思
2014/02/07 职场文书
怎么写自荐书范文
2014/02/12 职场文书
中班中秋节活动反思
2014/02/18 职场文书
统计系教授推荐信
2014/02/28 职场文书
人事任命书范文
2014/06/04 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
银行催款通知书
2015/04/17 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL