Vue-多个实例对象
2019-02-27 本文已影响0人
linlu_home
<!-- Vue--多个实例化对象 -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="styledemo1.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app-one">
<h4>{{ title }}</h4>
<p>{{ greet }}</p>
</div>
<div id="vue-app-two">
<h4>{{ title }}</h4>
<p>{{ greet }}</p>
<button v-on:click="changetitle1">改title</button>
</div>
<script src="app9.js"></script>
</body>
</html>
var a = new Vue({
el:"#vue-app-one",
data:{
title:"one"
},
methods:{
},
computed:{
greet: function(){
return "111";
}
}
});
var b = new Vue({
el:"#vue-app-two",
data:{
title:"two"
},
methods:{
changetitle1:function(){
a.title="已经改了one";
}
},
computed:{
greet: function(){
return 222;
}
}
});
b.title="改了2的titile";
