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>
-
引用 jquery 操作 dom 语法
不推荐使用jquery操作dom,因为jquery操作dom的方法是通过循环页面找到所有符合的元素,而vue是单页面的,若果使用jquery会产生歧义,因此不推荐使用。