在Vue中,是不可以直接去操作dom的,一般都是对数据进行处理;但也有一些特殊的情况,需要操作dom,可以通过设置ref属性来获取dom;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ref</title>
<!-- vue引用 -->
<script src="vue.js"></script>
</head>
<body>
<div id="demo">
<!-- 这里设置ref属性 -->
<p ref='p'>abcdefg</p>
<button @click='handleClick'>获取dom</button>
</div>
</body>
<script>
new Vue({
el: '#demo',
methods: {
handleClick(){
console.log(this.$refs.p)
// 改变p的text值
this.$refs.p.innerHTML = '1234567';
}
}
})
</script>
</html>
这个demo的效果是这样的
当点击button时,控制台输出的结果:
而此时页面也改变了