实例化多个vue对象

最新推荐文章于 2023-07-07 13:53:41 发布

转载最新推荐文章于 2023-07-07 13:53:41 发布 · 1.1k 阅读

文章标签：

#vue.js

html 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了Vue.js中不同实例之间的数据交互方法，包括如何通过一个Vue实例修改另一个实例的数据，以及直接在外层修改Vue实例数据的效果。通过实例演示了多个Vue对象的创建与数据响应性特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


</head>

<body>

<div id="vue-one">

{{ title }}<br/>

{{ greet }}<br/>

</div>


<div id="vue-two">

{{ title }}<br/>

{{ greet }}<br/>

<button @click="change">press</button>

</div>

<script src="app.js"></script>

</body>

//app.js

var one=new Vue({

el:"#vue-one",

data:{

title:"i am one"

},

methods:{

},

computed:{

greet:function(){return "hello one";}

}

});

var two=new Vue({

el:"#vue-two",

data:{

title:"i am two"

},

methods:{

change:function(){one.title="change one";}

},

computed:{

greet:function(){return "hello two";}

}

});


two.title="change two"

效果图：