vue如何实例化多个对象
vue可以在js里面实例化多个对象代码如下index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue</title><link rel="stylesheet" href="style.css">...
·
vue可以在js里面实例化多个对象
代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<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 @click="changeTitle">ChangeTitle</button>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//实例化VUE对象
var one = new Vue({
el:"#vue-app-one",
//仅限于在vue-app容器下
data:{
title:"app one的内容"
},
methods:{
},
computed:{
greet:function(){
return "Hello App One";
}
}
});
var two = new Vue({
el:"#vue-app-two",
//仅限于在vue-app容器下
data:{
title:"app two的内容"
},
methods:{
changeTitle:function(){
one.title = "已经改名了!"
}
},
computed:{
greet:function(){
return "Hello App Two";
}
}
});
two.title = "app two的Title也发生变化了"
在这里,vue对象被实例化为one 和 two,而且可以通过方法来互相调用属性,相互影响。
更多推荐
已为社区贡献5条内容
所有评论(0)