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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
JS常用跨域方法实现原理解析
Dec 09 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
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
js转换对象为xml
2017/02/17 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
快速了解python leveldb
2018/01/18 Python
python删除服务器文件代码示例
2018/02/09 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
代码详解django中数据库设置
2019/01/28 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python打包成so文件过程解析
2019/09/28 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
500行python代码实现飞机大战
2020/04/24 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
效能风暴心得体会
2014/09/04 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
法制工作总结2015
2015/07/23 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Redis如何一键部署脚本
2021/04/12 Redis