cssjshtml vue.js 多个vue实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>if</title>
</head>
<body>
<div id="vue-app">
<h1> 实例化多个对象</h1>
<div id="vue-app-one">
<p> {{ title }}</p>
<p> {{ greet }}</p>
</div>
<div id="vue-app-two">
<p> {{ title }}</p>
<p> {{ greet }}</p>
<button v-on:click="change">change one</button>
</div>
<script src="/static/js/vue.min.js"></script>
<script>
var one = new Vue({
el: "#vue-app-one",
data: {
title: "app-one"
},
methods: {},
computed: {
greet:function () {
return "computed app one"
}
}
});
var two = new Vue({
el: "#vue-app-two",
data: {
title: "app-two"
},
methods: {
change:function () {
one.title="changed app one"
}
},
computed: {
greet:function () {
return "computed app two"
}
}
});
two.title="changed app two";
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/12/03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读