<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<h1>初始化多個vue實例對象</h1>
<div id="vue-app-one">
<h2>{{title}}</h2>
<p>{{greet}}</p>
</div>
<div id="vue-app-two">
<h2>{{title}}</h2>
<p>{{greet}}</p>
<button v-on:click="changeTitle()">changeTitle one</button>
</div>
<script src="v-oj.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
v-oj.js
var one = new Vue({
el:"#vue-app-one",
data:{
title:"one當中的內容",
},
methods:{
},
computed:{
greet:function(){
return "hello App one"
}
}
});
var two = new Vue({
el:"#vue-app-two",
data:{
title:"two當中的內容"
},
methods:{
changeTitle:function(){
one.title="已經改名";
}
},
computed:{
greet:function(){
return "hello App two"
}
}
});
two.title="app two 也發生變化";