【vue学习】vue对象的操作
【Vue学习】vue对象的操作
1.可以通过一个Vue对象操作另一个Vue对象
<body>
<div id="app1">
{{title}}
<input type="button" @click="toUpCase" value="toUpCase"/>
{{toLowCase}}
</div>
<div id="app2">
<input type="button" @click="changeV1Title" value="changeV1Title">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app1",
data:{
title:"hello vue!"
},
methods:{
toUpCase:function(){
this.title = this.title.toUpperCase();
}
},
computed:{
toLowCase:function(){
return this.title.toLowerCase();
}
}
});
var v2 = new Vue({
el:"#app2",
methods:{
changeV1Title:function(){
v1.title = "Hello Java"
}
}
})
</script>
</body>2.Vue对象操作另一个Vue对象的内容，维度有两个，操作属性、操作方法
这些属性，是data或者computed里定义的
3.Vue的实例属性
Vue对象中的el、data等等的这些键也成为属性，这些属性就是Vue对象的实例属性！
<body>
<div id="app1">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
//这里没有用el绑定
template:"<h1>hello</h1>"
})
//script执行到此处进行动态绑定
v1.$mount("#app1");
</script>
</body>
image-20200930154942832
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录