文章目录
前言一.ref属性的使用1.要给操作的元素设置ref属性2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}3.代码示例
总结
前言
学习vue是如何操作dom元素
提示：以下是本篇文章正文内容，下面案例可供参考
一.ref属性的使用
1.要给操作的元素设置ref属性
2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}
3.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue基础refdom操作
</title>
</head>
<body>
<div id="app">
<input type="text" ref="text" v-model="text"/>
</div>
</body>
</html>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
methods:{
},
data:{
text:''
},
mounted(){
this.$refs.text.focus();
}
});
</script>
【自动获取焦点】 代码示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue基础refdom操作
</title>
</head>
<body>
<div id="app">
<div ref="text">{{text}}
</div>
<button @click="add">添加
</button>
</div>
</body>
</html>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
methods:{
add:function() {
this.$refs.text.innerHTML+= "世界那么大，我向想出去看一看";
}
},
data:{
text:''
}
});
</script>
总结
学习vue是如何操作dom元素
