vue,js入门（14）实例化多个vue对象

最新推荐文章于 2024-08-20 09:59:18 发布

谢西顾

最新推荐文章于 2024-08-20 09:59:18 发布

阅读量1.4w

点赞数 4

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80363741

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

//index.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"

效果图：