Three methods of vue to manipulate dom

Three methods of vue to manipulate dom

1. javascript manipulation dom syntax

    <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>
   

2. Vue's own ref attribute operation dom syntax

    <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>
   

3. Reference jquery operation dom syntax

   It is not recommended to use jquery to operate dom, because the method of jquery to operate dom is to find all the matching elements by looping pages, and vue is a single page, if jquery is used, it will cause ambiguity, so it is not recommended.