Vue 初始化多个Vue 及之间的相互修改-优快云博客

 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>

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 });