<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="vue.css">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style type="text/css">
.cr{
color:red;
}
</style>
</head>
<body>
<h3>初始化多个Vue 实例对象</h3>
<div id="vue-app-one">
<h2 id ='colorred' v-bind:class="{cr:ended}">{{ msg }}</h2>
<p>{{ greet }}</p>
</div>
<div id="vue-app-two">
<h2>{{ msg }}</h2>
<p>{{ greet }}</p>
<button v-on:click="changMsg" >修改vmOne.msg信息</button>
</div>
<script src="app.js"></script>
</body>
</html>
HTML
var vmOne=new Vue({
el:'#vue-app-one',
data:{
msg:'你妹的',
ended:false
},
methods:{
},
computed:{
greet:function(){
return 'hello world！';
}
}
});
var vmTwo=new Vue({
el:'#vue-app-two',
data:{
msg:'你哥的'
},
methods:{
changMsg:function(){
vmOne.msg='修改消息';
vmOne.ended=true;
}
},
computed:{
greet:function(){
return 'hello world！';
}
}
});
Vue.js