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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python装饰器用法实例分析
2019/01/14 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
学校政风行风整改方案
2014/10/25 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
工作态度怎么写
2015/06/25 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书