vue 应用 ：多语言显示 

 1 <template>
 2   <div class="hello2">
 3     <page-content>
 4     </page-content>
 5   </div>
 6   <div class="hello">
 7     <h1>{{ message.hello }}</h1><button @click="fun2">change lang</button>
 8     <h1>{{ message.hello2 }}</h1> 
 9   </div>
10 </template>
11 
12 <script>
19 const messageEN = {
20     hello:'Welcome to Your Vue.js App',
21     hello2:'Even You'
22 }
23 const messageCN = {
24     hello:'欢迎来到你的vue.js应用',
25     hello2:'尤雨溪'
26 }
27 let status = 'EN'
28 export default {
29   name: 'HelloWorld',
30   data () {
31     return {
32       status:'EN',  
33       message:this.fun1(),
34       msg: 'Welcome to Your Vue.js App'      
35     }
36   }, 
37   methods:{
38     fun1(){
39         console.log(this.status)
40         if (this.status === 'CN') {
41             return messageCN
42         } else {
43             return messageEN
44         }        
45     },
46     fun2(){
47         console.log(this.status)
48         if (this.status === 'EN') {
49             this.status = 'CN'
50         } else {
51             this.status = 'EN'
52         }        
53         this.message = this.fun1()
54     }
55   }
56 }
57 </script>
58 
59 <!-- Add "scoped" attribute to limit CSS to this component only -->
60 <style lang="LESS" scoped>
61     /* Variables */
62     @r:#ff0000; 
63 
64     .hello{
65         color:@r;
66     }
67     .hello2{
68       width: 100vw;
69       height: 100vh;
70     }
71 </style>

 

posted on 2018-05-26 16:20  fox_charon  阅读(470)  评论(0)  编辑  收藏  举报

导航