vue 操作 dom 的 3 个方法

最新推荐文章于 2024-07-19 14:08:18 发布

赶一场落日

最新推荐文章于 2024-07-19 14:08:18 发布

阅读量3.1k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hannah_bb/article/details/127384506

版权

本文介绍了如何在Vue中通过JavaScript操作DOM改变按钮颜色，同时对比了使用ref属性和避免使用jQuery操作DOM的优点。通过实例演示了每种方法的实现，适合前端开发者了解不同场景下的DOM操作策略。

摘要由CSDN通过智能技术生成

vue 操作 dom 的 3 个方法

javascript 操作 dom 语法

 <template>
     <div>
         <p>通过javascript操作dom，使按钮文字变颜色</p>
         <button id="btn" @click="changeColor">javascript操作dom</button>
     </div>
 </template>

 <script>
 export default {
     methods:{
         changeColor(){
             const btn = document.getElementById("btn");
             btn.style.color = "red";
         }
     }
 }
 </script>

vue 自带的 ref 属性操作 dom 语法

 <template>
     <div>
         <p>通过vue的ref属性操作dom，使按钮文字变颜色</p>
         <button ref="btn" @click="changeColor">vue的ref属性操作dom</button>
     </div>
 </template>

 <script>
 export default {
     methods:{
         changeColor(){
             this.$refs.btn.style.color = "blue";
         }
     }
 }
 </script>