vue1.0的v-el(获得dom对象) 和v-ref（获得组件对象）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue1.js"></script>
<!--<script src="vue-resource.js"></script>-->
</head>
<body>
<div id="app">
<button @click="getdom">获取dom对象</button>
<div v-el:mydiv id="div1">div1内容</div>
<button @click="getcom">获取组件对象</button>
<login v-ref:mydom >组件内容</login>
</div>
</body>
<script>
new Vue({
el:'#app',
methods:{
getdom:function(){
//获取id=div1的对象(的内容)有两种方式可以完成
//传统的方法
console.log(document.getElementById("div1").innerHTML);
//vuejs的写法
console.log(this.$els.mydiv.innerHTML);
},
getcom:function(){
//获取组件对象
console.log(this.$refs.mydom);
//获得组件数据内容
console.log(this.$refs.mydom.subname);
}
},
components:{
'login':{
data:function(){
return{
subname:'子组件名字'
}
},
template:'<h2>这是子组件</h2>'
}
}
});
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)