通常会遇到页面要有中英文切换功能，今天尝试做了一下，如下：

首先是通过点击上方English ，把下面的按钮切换为英文：

直接上js代码：

<script>
const zh = {
  name: "English",
  title1: "你好",
};
const en = {
  name: "中文",
  title1: "hello",
};
export default {
  data() {
    return {
      loclang: zh,
    };
  },
  methods: {
    changelang() {
      if (this.loclang.name == "English") {
        this.loclang = en;
      } else {
        this.loclang = zh;
      }
    },
  },
  mounted() {},
};
</script>

html代码（关键是@click="changelang"以及{{ loclang.name }}）：

<template>
  <div>
    <br /><br /><br /><br /><br />
    <el-row>
      <el-col :span="10"><p></p></el-col>
      <el-col :span="2">
        <el-button style="zoom: 1; width: 100px" type="" @click="changelang">{{
          loclang.name
        }}</el-button>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="10"><p></p></el-col>
      <el-col :span="2">
        <el-button style="zoom: 1; width: 100px" type="danger">{{
          loclang.title1
        }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

然后当点击English按钮时发生变动：

 

可以根据例子将当前页面全部设置：

//<el-button @click="changelang">{{loclang.name}}</el-button>  

//只需要在下面起一个名字然后在html（如上）里以 loclang.+ “所起名字” 这样来使用。


const zh = {
  name: "English",
  title1: "你好",
};
const en = {
  name: "中文",
  title1: "hello",
};

html如何调用js ：

//在组件里用通常是加双引号就ok例如：   :label="loclang.table1label2"
//在外面的话加双括号例如：   {{loclang.table1label2}}

当学会这种方式就可以尝试把这些功能做成一个组件来使用