回顾之前的操作
之前的这些操作都是我们使用vue为我们渲染的对象,再来操作dom
- 内容改变{{ 模板语法 }}
- 属性改变 v-bind:
- 添加事件 v-on
本节讲直接操作dom的方法.
ref 属性
通过this.$refs.对象ref属性值来拿到dom注意这里是refs!!!
<template>
<h3>Dom的模板引用</h3>
<div ref="qwer">{{ message }}</div>
<button @click="getElementHandle">获取dom</button>
</template>
<script>
export default {
data() {
return {
message: "mzh",
};
},
methods: {
getElementHandle() {
console.log(this.$refs.qwer);
},
},
watch: {},
};
</script>
借助dom使用原生js
费力气就是为了能用原生js,大部分情况我们其实用不到dom,用前面学过的v命令就够了
<template>
<h3>Dom的模板引用</h3>
<div ref="qwer">{{ message }}</div>
<button @click="getElementHandle">获取dom</button>
</template>
<script>
export default {
data() {
return {
message: "mzh",
};
},
methods: {
getElementHandle() {
console.log("原来的dom", this.$refs.qwer);
this.$refs.qwer.innerHTML = this.$refs.qwer.innerHTML + "wg191";
console.log(this.$refs.qwer.innerHTML);
console.log("改变的dom", this.$refs.qwer);
},
},
watch: {},
};
</script>
总结
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！
版权声明：
发现你走远了@mzh原创作品，转载必须标注原文链接
Copyright 2024 mzh
Crated：2024-3-1