vue实例化多个对象调用

最新推荐文章于 2023-11-14 15:02:17 发布

mischen520

最新推荐文章于 2023-11-14 15:02:17 发布

阅读量397

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/miachen520/article/details/115608440

版权

vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

//实例化vue对象
var one = new Vue({
	el:"#app-one",
	data:{
	   characters:["ddd","34","df"],
	   users:[
	   {name:"mischen",age:30},
	   {name:"mischen1",age:33},
	   {name:"mischen2",age:35},
	   {name:"mischen3",age:36}
	   ],
	   success:false,
	   title:"app one 的内容！"
	},
	methods:{
		
	},
	computed:{
		greeet:function(){
			return "Hello world one";
		}
	}
	
});

var two = new Vue({
	el:"#app-two",
	data:{
	   characters:["ddd","34","df"],
	   users:[
	   {name:"luke1",age:10},
	   {name:"luke2",age:20},
	   {name:"luke3",age:30},
	   {name:"luke4",age:40}
	   ],
	   success:false,
	   title:"app two 的内容！"
	},
	methods:{
		changeTitle:function(){
			one.title="已经修改名字了！";
		}
	},
	computed:{
		greeet:function(){
			return "Hello world two";
		}
	}
	
});

two.title ="app two的title也发生了变化";

/*
*
**
*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>vue.js 学习</title>
		<link rel="stylesheet" href="styles.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
		<h1> 初始化多个vue实例对象 </h1>
        <div id="app-one">
		   <h2>{{title}}</h2>
		   <p>{{greeet}}</p>
		   <template v-for="(user,index) in users">
		    <h3>{{index+1}} .{{user.name}}</h3>
			<p>Age -{{user.age}}</p>
		    </template>	
		</div>
		 <div id="app-two">
		   <h2>{{title}}</h2>
		   <p>{{greeet}}</p>
		   <template v-for="(user,index) in users">
		    <h3>{{index+1}} .{{user.name}}</h3>
			<p>Age -{{user.age}}</p>
		    </template>	
			<button v-on:click="changeTitle">change title one</button>
		</div>
		<script src="app.js"></script>
    </body>
</html>

mischen520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例化多个对象调用

//实例化vue对象var one = new Vue({ el:"#app-one", data:{ characters:["ddd","34","df"], users:[ {name:"mischen",age:30}, {name:"mischen1",age:33}, {name:"mischen2",age:35}, {name:"mischen3",age:36} ], success:false, title:.
复制链接

扫一扫