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>