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>