vue 应用 ：多语言显示

<template>
  <div class="hello2">
    <page-content>
    </page-content>
  </div>
  <div class="hello">
    <h1>{{ message.hello }}</h1><button @click="fun2">change lang</button>
    <h1>{{ message.hello2 }}</h1> 
  </div>
</template>

<script>
const messageEN = {
    hello:'Welcome to Your Vue.js App',
    hello2:'Even You'
}
const messageCN = {
    hello:'欢迎来到你的vue.js应用',
    hello2:'尤雨溪'
}
let status = 'EN'
export default {
  name: 'HelloWorld',
  data () {
    return {
      status:'EN',  
      message:this.fun1(),
      msg: 'Welcome to Your Vue.js App'      
    }
  }, 
  methods:{
    fun1(){
        console.log(this.status)
        if (this.status === 'CN') {
            return messageCN
        } else {
            return messageEN
        }        
    },
    fun2(){
        console.log(this.status)
        if (this.status === 'EN') {
            this.status = 'CN'
        } else {
            this.status = 'EN'
        }        
        this.message = this.fun1()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="LESS" scoped>
    /* Variables */
    @r:#ff0000; 

    .hello{
        color:@r;
    }
    .hello2{
      width: 100vw;
      height: 100vh;
    }
</style>