zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    flink checkpoint机制的实现
    openjdk源码分析之AtomicLong
    cpp之宏和函数调用约定
    JNA 相关问题
    spark RDD
    最长连续序列
    买卖股票的最佳时机
    二叉树展开为链表
    不同的二叉搜索树
    柱状图中最大的矩形
  • 原文地址:https://www.cnblogs.com/foxcharon/p/9093203.html
Copyright © 2011-2022 走看看