标签：charset otc 图片 methods 分享图片 set html css 消息
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="vue.css"> 7 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 8 <style type="text/css"> 9 .cr{ 10 color:red; 11 } 12 </style> 13 </head> 14 <body> 15 <h3>初始化多个Vue 实例对象</h3> 16 <div id="vue-app-one"> 17 <h2 id =‘colorred‘ v-bind:class="{cr:ended}">{{ msg }}</h2> 18 <p>{{ greet }}</p> 19 </div> 20 21 <div id="vue-app-two"> 22 <h2>{{ msg }}</h2> 23 <p>{{ greet }}</p> 24 <button v-on:click="changMsg" >修改vmOne.msg信息</button> 25 </div> 26 27 <script src="app.js"></script> 28 </body> 29 </html>
1 var vmOne=new Vue({ 2 el:‘#vue-app-one‘, 3 data:{ 4 msg:‘你妹的‘, 5 ended:false 6 }, 7 methods:{ 8 9 }, 10 computed:{ 11 greet:function(){ 12 return ‘hello world！‘; 13 } 14 } 15 }); 16 17 18 var vmTwo=new Vue({ 19 el:‘#vue-app-two‘, 20 data:{ 21 msg:‘你哥的‘ 22 }, 23 methods:{ 24 changMsg:function(){ 25 vmOne.msg=‘修改消息‘; 26 vmOne.ended=true; 27 } 28 }, 29 computed:{ 30 greet:function(){ 31 return ‘hello world！‘; 32 } 33 } 34 });
标签：charset otc 图片 methods 分享图片 set html css 消息
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9459555.html
